Vue 组件间的通讯

一、首先是父组件传给子组件

var startVue_1 = new Vue({
el:'#container-1',
data:{
g3:'3'
},
components: {
'lchild':{
props:['papa'],
template:"<input class = 'input' v-model='papa' type='text' placeholder='我局部子组件'></input>"
}
},
});

// html
<div class = 'container' id='container-1'>
<lchild :papa='g3'></lchild>
</div>

这样lchild这个组件就接收到了g3的值，并绑定；

二、子组件传给父组件

修改一下代码：

var startVue_1 = new Vue({
el:'#container-1',
data:{
g3:'3'
},
components: {
'my-component': board,
'lchild':{
props:['papa'],
data:function(){
return {
g6:'6'
}
},
template:"<input class = 'input'    v-model='g6' @blur='backData' placeholder='我局部子组件'></input>",
methods: {
backData:function(){
// 派发事件 back，在父组件处接收
this.$emit('back',this.g6)
}
}
}
},
methods:{
//  接收到back事件执行setD
setD:function(e){
this.g3 = e
}
}
});

然后在父组件处监听事件：

<input v-model='g3' placeholder='我是直接写出来的' class = 'input'>

<lchild @back='setD'></lchild>

执行，看下结果：（结果正常，子组件传值成功）



三、子组件与子组件之间的通讯

这里只是简单地结合一二，把值传给父组件，再把值传给另外一个子组件

Vue.component('gchild',{
template:"<div class = 'inputItem'><h4>全局：</h4><input class = 'input' type='text' v-model='data' placeholder='我全局子组件'></input></div>",
props:['data']
})

再在html处绑定：

<gchild :data='g3'></gchild>

执行：



四、两个不同实例的传值

其实这个最简单，和普通的对象传值一样，直接拿到

var startVue_1 = new Vue({
el:'#container-1',
data:{
g3:'3'
}
})

var startVue_2 = new Vue({
el:'#container-2',
data:{
// 这样就拿到了startVue_1的g3的值
g2:startVue_1.$data.g3
}
})