组件：简言之就是将一些共性的内容做一个封装，方便以后重复使用。
在vue中组件包括：全局组件和局部组件。组件都具有复用性，自定义的组件拥有vue的全部特性，包括生命周期、template、data、methods、script、style等。
组件的命名：
（1）组件名称官方规定使用小写字母且用‘-’连接
（2）组件可以使用驼峰命名法，但是在使用时必须大写转小写，且用‘-’连接，因为html不识别大小写，全部会被认为小写。
通过一个对象的方式直接定义，在vue实例中注册后使用
对象中包含一个template属性，表示组件使用的模板html。另外在组件中定义的data必须是一个function，需要一个对象定义的返回值
<div id="app"> <abc></abc> </div> <script>
var c={
template:`<div>
<p>我是用来展示组件嵌套的</p>
</div>`
}
var h={ template:`<div> <h5>hello world</h5> <button @click=‘clickHandle‘>{{count}}</button>
<c/> </div>`, data(){ return{ count:0 } },
compoents:{
c,
}, methods:{ clickHandle(){ this.count+=1; } } }
var app=new vue({ el:‘#app‘, components:{ abc:h, } })
</script>
参数一：表示组件id
参数二：表示组件的配置信息
全局组建定义完成后，可以直接使用
1 <div id="app"> 2 <mr></mr> 3 </div> 4 5 <script> 6 Vue.component(‘mr‘,{ 7 temple:`<div>我是一个全局组件</div>`}) 8 var app=new vue({ 9 el:‘#app‘, 10 }) 11 </script>
另一种写法
在模板中，有且只有一个根节点用来包裹所有的节点
<div id="app">
//通过绑定一个事件进行事件监听
<h5 >接收到的子组件传来的值:{{str}}</h5> <abc @countadd=‘countAdd‘></abc> </div> <script> var h={ template:`<div> <h5>hello world</h5> <button @click=‘clickHandle‘>{{count}}</button> </div>`, data(){ return{ count:0 } }, compoents:{ c, }, methods:{ clickHandle(){ this.count+=1;
this.$emit(‘countadd‘,this.count)//通过$emit来进行事件派发 } } } var app=new vue({ el:‘#app‘, components:{ abc:h, },
data:{
str:‘‘,
},
methods:{
countAdd(v){
this.str=v;
}
} }) </script>
父组件向子组件传值通过props
<div id="app">
//通过绑定一个事件进行事件监听
<h5 >接收到的子组件传来的值:{{str}}</h5>
<abc step="3"></abc>
</div>
<script>
var h={
template:`<div>
<h5>hello world</h5>
<button @click=‘clickHandle‘>{{count}}</button>
</div>`,
data(){
return{
count:0
}
},
props:[‘step‘],//子组件接收父组件
compoents:{
c,
},
methods:{
clickHandle(){
this.count+=this.step*1;//将接收到的数组隐式转化为number型
}
}
}
//定义组件
var app=new vue({
el:‘#app‘,
components:{
abc:h,
},
data:{
str:‘‘,
},
methods:{
countAdd(v){
this.str=v;
}
}
})
</script>
结论：（1）使用props可以实现父子组件之间的传值（2）使用this.$emit()可以实现子组件调用父组件的方法达到传值的效果
原文：https://www.cnblogs.com/xiangW/p/10994618.html