众所周知,父传子用props,子传父用$emit()

那么问题来了,兄弟组件之间如何传值呢?祖孙组件之间又如何传值呢?

其实很简单,事件总线,我们先在main.js给vue原型绑定一个$bus

Vue.prototype.$bus = new Vue()

它的值很特殊,是一个Vue实例

之后我们该如何使用它呢?举个例子:

A组件下有2个子组件,分别是B和C,B组件下有子组件D,C组件下有组件E。

那么此时,如果组件E内部发生了点击事件,而D组件想要监听这次事件,则

//E组件内部按钮被点击,通过$bus的$emit发射事件并携带参数
    methods:{
      eButtonClick(){
          this.$bus.$emit("eButtonClick",{id:123})
      }
    }
//D组件中通过$bus的$on监听事件和接收参数,通常写在当前组件生命周期mounted中
    mounted() {
      this.$bus.$on('eButtonClick', data => {
        console.log(data.id)
        //会在控制台打印出E组件传过来的id,也就是123
      })
    }
/*
*注意:发射和监听的事件名称必须一致,data就是获取的数据。
*可以不写data,你可以自己命名
*/

此时,E组件和D组件就完成了通信。

               

作者