Vue 组件通信——兄弟组件

一、通过EventBus进行兄弟间组件通讯

1.通过 import 引入vue公共实例

1）在main.js文件中定义一个新的eventBus对象，其实他是一个全新的Vue实例：

export const eventBus = new Vue();

2）兄弟组件A.vue

import { eventBus } from '@/main'

  //监听事件
  created() {
    eventBus.$on('showMenus', (arg) => {
      console.log('123'+arg);
      alert(arg);
    })
  },

3）兄弟组件B.vue

import { eventBus } from '@/main'

//分发事件传值
 methods: {
  switchmenu:function(flag){
    eventBus.$emit('showMenus',flag); //触发事件
    }
  }

2.通过 window传递vue公共实例

1）在main.js文件中实例化一个Vue对象，并把它赋值于window.eventBus,这样eventBus就可以在任何组件中使用：

window.eventBus = new Vue();

2）兄弟组件A.vue

  //监听事件
export default {
  created() {
    eventBus.$on('showMenus', (arg) => {
      console.log('123'+arg);
      alert(arg);
    })
  }
}

3）兄弟组件B.vue

export default {
//分发事件传值
 methods: {
  switchmenu:function(flag){
    eventBus.$emit('showMenus',flag); //触发事件
    }
  }
}

二、通过父级组件进行兄弟间组件通讯

1.父组件：

2.哥哥组件

3.妹妹组件

总结：

参考资料：Vue组件通讯：https://www.w3cplus.com/vue/component-communication.html