不全面,请参考官网进行理解。
组件实例作用域孤立,组件不让父子之间进行通信,data里面的数据不能作为全局的使用了。
Vue.component ('child', {
//定义props
props : ['message']
//message是我们预期的父组件数据
template:'<span>{{message}}</span>'
//template里面定义child的模版
})
<child message = 'hello'><child>
//渲染为<span>hello</span>
其中child就相当与父组件,span就相当与子组件。
子传父,使用$.emit( )
<div id = 'A'>
<p>{{mes}}</p>
<myButton v-on:inC = 'inB'><myButton>
<myButton v-on:inC = 'inB'><myButton>
</div>
Vue.component('myButton', {
template: '<button v-on:click='inD'> {{mes2}} </button>'
data:function(){
return {
mes2 : 0
}
},
methods : {
•inD: function(){
//inD是子组件点击事件触发的函数
this.mes2 += 1
//在这里使用了$emit()与父组件的 inC 绑定,当 inD 函数执行,就会使 inC 事件触发,执行父组件的 inB 函数
•this.$emit('inC')
}
}
})
new Vue ({
el:'#A',
data: {
mes: 0
}
methods: {
•inB: function(){
this.mes += 1
}
}
})