Vue---兄弟组件通信（三种方式）

第一种：eventBus

    新建一个js文件， 我这里叫做 bus.js,

    文件内容：

          import Vue from 'vue';  
         export default new Vue();

   然后在你需要触发的 组件中引入   import   bus  from  '文件路径'

         执行：bus.$emit('触发名称', 传输的数据 )

最后在你需要的通信的另一个组件中   mounted生命周期钩子中执行如下：

    bus.$on('触发名称', res => {

    //写你需要的方法

})

第二种：直接在 main.js中 直接如下

然后其中一个兄弟组件 执行

this.$root.vm.$emit('触发名称', 传输的数据)；

另一个兄弟组件中执行

this.$root.vm.$on('触发名称', 传输的数据)；

第三种：同样是直接在 main.js

Vue.prototype.$vm = new Vue();

使用：this.$vm.$emit(); 

           this.$vm.$on();

注意：emit  和 on 中 第一参数 触发名称 必须相同，同时二者原理一致

同时，需要关闭该通信，尤其是接口调用的时候，关闭方法 this.**.$off("通信名称")

 

如有问题  可以加我微信  dp319_