兄弟通信
看了官网的教程，我认为兄弟通信是其他组件通信的基础，只要掌握好兄弟通信，其他两种也很容易掌握。
首先来看官网的教程：
非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线
主要代码如下：
var bus = new Vue(); //事件总线
//组件b
Vue.component('bbb',{
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="toC">Send</button>
</div>`,
data:function(){
return {
message:'1234'
}
},
methods:{
toC:function(){
bus.$emit("receiveMsg",this.message); // 触发组件C 中的事件
}
}
})
//组件c
Vue.component('ccc',{
template: `<div>
<p>{{message}}</p>
</div>`,
data:function(){
return {
message:'c的初始值',
}
},
created(){
var self=this;//绑定this指向组件c
bus.$on('receiveMsg',function(data){ //c组件的钩子中监听事件
self.message=data;
})
},
})
var app = new Vue({
el: '#app',
data: {
},
});
效果预览：
image
父子通信
父子通信与兄弟的区别在于：兄弟都是平级传递，但是父子有父传子，子传父两种情况。
-
父传子
使用 Prop 传递数据
vue官网提供了props属性来完成这个工作
子组件要显式地用props 选项声明它预期的数据：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: '<span>{{ message }}</span>'
})
然后我们可以这样向它传入一个普通字符串：
<child message="hello!"></child>
-
子传父
我们已经知道兄弟通信需要一个新的Vue实例来作为事件总线。子传父的实质也是如此，区别是让父亲来担任这个事件总线。
代码如下
Vue.component('bbb',{
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="toFather">Send</button>
</div>`,
data:function(){
return {
message:'1234'
}
},
methods:{
toFather:function(){
this.$emit("get-msg",this.message);
}
}
})
var app = new Vue({
el: '#app',
data: {
message:'',
},
methods:{
getSon:function(data){
this.message=data;
}
}
});
<div id="app">
<p>{{message}}</p>
<bbb class="bbb" v-on:get-msg="getSon"></bbb>
</div>
效果如下：
image
爷孙通信
爷孙通信基于父子通信来实现，可以看成是两对父子通信。有兴趣的同学可以自行实现一下。
贴一段孙传爷的代码
Vue.component('bbb',{
template: `<div>
<ccc class="son" v-on:getccc="toGrand"></ccc>
</div>`,
data:function(){
return {
message:'1234'
}
},
methods:{
toGrand:function(data){
this.$emit("final",data);
}
}
})
Vue.component('ccc',{
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="sonTofather">Send</button>
</div>`,
data:function(){
return {
message:'我是第三代',
}
},
methods:{
sonTofather:function(){
this.$emit("getccc",this.message);
}
},
})
var app = new Vue({
el: '#app',
data: {
son:'',
},
methods:{
showMessage: function (data) {
this.son=data;
}
}
});
效果如下：
image
总结
- 兄弟通信是掌握另外两种通信的基础。
- 父子通信是用父亲作为事件总线的兄弟通信
- 爷孙通信可以看作是两组父子通信
最后，希望我的博客可以帮到大家，欢迎各位同学批评指正。
