兄弟通信

看了官网的教程，我认为兄弟通信是其他组件通信的基础，只要掌握好兄弟通信，其他两种也很容易掌握。
首先来看官网的教程：

非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 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

总结

• 兄弟通信是掌握另外两种通信的基础。
• 父子通信是用父亲作为事件总线的兄弟通信
• 爷孙通信可以看作是两组父子通信
  最后，希望我的博客可以帮到大家，欢迎各位同学批评指正。