写一个vue组件
写一个vue组件
我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli。
一个完整的vue组件会包括一下三个部分:
- template:模板
- js: 逻辑
- css : 样式
每个组件都有属于自己的模板,js和样式。如果将一个页面比喻成一间房子的话,组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话,组件又可以是刀、油烟机...等等。就是说页面是由组件构成的,而组件也可以是组件构成的。这样就可以非常的灵活,耦合性也非常的低。
首先来看看一个组件在不是在.vue文件内的写法:
Vue.component('simple-counter', {
template: '<div id="inputBox"><input type="text"></div>',
data () { // 数据
return {
counter: 0
}
},
methods: {
// 写点方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
})
template是用来干嘛的呢?
<template>
<div id="inputBox">
<input type="text">
</div>
</template>
<!--
template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来):
-->
<div id="inputBox">
<input type="text">
</div>
<!--
对应原生写法的话,就是template内的dom字符串
-->
js部分
export default {
data () {
return {
counter: 0
}
},
methods: {
// 方法
},
created () {
// 生命钩子
},
computed: {
// 计算属性
}
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法,不懂的可以先去了解es6的模块化
css部分
<style lang="scss" scoped>
...样式
</style>
<!--这里的你可以使用scss(CSS扩展语言)只要安装"sass-loader"和"node-sass"这两个npm包就好了,vue-cli已经配好相关参数了。如果想使用less或其它css扩展语音,只要装好各自的编译包就好了。而scoped是让css的作用域只在该文件下。-->
引入
要怎么在其它组件引用该组件?
组件一(button.vue)
<template>
<div class="button">
<button @click="onClick">{{text}}</button>
</div>
</template>
<script>
export default {
props: ['text'], // 获取父组件的传值
data () {
return {
}
},
methods: {
onClick () {
console.log('点击了子组件')
// 通过触发自定义事件修改父组件传递的text
this.$emit('event1', '我修改了text')
}
}
}
</script>
<style lang="scss" scoped>
.button {
button {
width: 100px;
}
}
</style>
组件二(box.vue)
<template>
<div class="box">
<v-button :text="text" ref="button" @event1="changeText"></v-button> <!--使用组件并传值(text)-->
</div>
</template>
<script>
import Button from './button.vue' // 引入子组件
export default {
components: {
'v-button': Button
},
data () {
return {
text: '按键的name'
}
},
methods: {
changeText (value) { // 自定义事件修改text的值
this.text = value
}
}
}
</script>
这里box.vue里引入了button.vue的组件,并通过components注册,在box.vue使用时只要使用注册时候的名称即可。
父组件向子组件传递数据
可以通过prop向子组件传值。
子组件和父组件的交互其实还有很多,例如子组件要怎么修改父组件传递的值?
因为vue的数据是单向的,所以子组件是不允许修改父组件的值的,官方是通过事件的形式修改的,就是父组件在子组件绑定一个自定义事件v-on:event1="event1",
然后子组件通过this.$emit('event1')触发修改。可以理解为修改父组件传递的值一定要发生在父组件所在的作用域内。
父组件怎么获取子组件的实例
这里父组件可以在子组件定义ref,在通过this.$refs.xxx获取对应的子组件实例。
而子组件可通过this.$parent获取父组件的实例。
写一个vue组件的更多相关文章
- 如何写好一个vue组件,老夫的一年经验全在这了【转】 v-bind="$attrs" 和 v-on="$listeners"
如何写好一个vue组件,老夫的一年经验全在这了 一个适用性良好的组件,一种是可配置项很多,另一种就是容易覆写,从而扩展功能 Vue 组件的 API 来自三部分——prop.事件和插槽: prop 允许 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- js单行写一个评级组件
单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...
- 自己编写并发布一个Vue组件
自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建p ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式
表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- 如何优雅的写一个Vue 的弹框
写Vue或者是react 都会遇见弹框的问题.也尝试了多种办法来写弹框,一直都不太满意,今天特地看了一下 Element UI 的源码,模仿着写了一个简易版. 大概有一下几个问题: 1.弹框的层级问题 ...
随机推荐
- 数据结构之队列c代码实现
一学期的数据结构,总不能毫无收获吧,因为书上的很多代码并不能实现,我一个编程小白可怎么过呢,难得假期有时间,于是我寻求度娘,从四面八方找了些可以编译通过的源码,这一次是队列,后面我还会逐渐补充,如果有 ...
- Redis 桌面管理器
使用Redis桌面管理器,可以方便开发人员进行开发测试,对Redis存储内容进行可视化管理. 下载安装:https://redisdesktop.com/download 1. 为了方便测试,打开re ...
- Docker学习——pinpoint部署
Pinpoint Install pinpoint-server 下载镜像 docker pull yous/pinpoint 查看镜像 docker images 启动容器 docker run - ...
- NGUI_Label
五.Label是标签,一般是用来显示文字使用,当然NGUI的扩展性很强,可以通过添加相关的控件组成组合控件来进行复杂功能的使用. 1. 设置字体:可以设置NGUI中的字体,也可以设置Unity中的字体 ...
- canvas动画气球
canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...
- css3 背景色 实现边框渐变运动动画
css3 #body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-anima ...
- HTTP缓存带来的“bug”--HTTP 协议 Cache-Control
问题描述 先说背景.网站是用PHP开发的,未用任何框架,代码结构也非常简单.运行于阿里云服务器,并采用其CDN来做分发.根据业务需求,有的页面会判断用户浏览器类型,依此来选择PC或者手机端内容. 在一 ...
- selenium2自动化测试学习笔记(二)
chromedriver报错问题解决了,真是无语 是因为chromedriver与浏览器版本不一致 http://chromedriver.storage.googleapis.com/index.h ...
- java基础笔记(8)----接口
接口 是特殊的抽象类,纯抽象类---所有方法都是抽象方法 接口和抽象类的区别: 相同点: 编译后,会分别生成对应的.class文件 都不能创建对象(实例化),但是可以生成引用(使用多态) 不同点: 抽 ...
- mqtt异步publish方法
Python基于mqtt异步编程主要用到asyncio及第三方库hbmqtt,这里主要介绍mqtt的异步发布及遇到的一些问题. hbmqtt安装很简单,pip hbmqtt install. mqtt ...