让两个组件之间通讯

如何让非父子组件通信？Events Bus。

一、基本语法规则

1、创建 src/utils/event-bus.js 并写入

// 全局通信总线
// 可以让任何组件之间相互通信

import Vue from 'vue'

// 直接导出一个空的 Vue 实例
export default new Vue()

2、使用 event-bus 通信

在通信的 a 端初始化 created 的时候注册监听一个自定义事件：

import eventBus from '@/utils/event-bus'

export default {
  ...
  created () {
  	// 参数1：一个字符串，自定义事件名称
  	// 参数2：一个函数，事件发布以后就会调用
  	eventBus.$on('自定义事件名称', () => {
      // 业务逻辑代码
    })

    // 如果有参数的话，就声明接收
    eventBus.$on('自定义事件名称', (arg) => {
      // 业务逻辑代码
    })
	}
}

在通信的 b 端发布调用自定义事件

import eventBus from '@/utils/event-bus'

export default {
  ...
  methods: {
    // 在某个业务方法中
    test () {
      // 参数1：自定义事件名称，必须是订阅的名字一致
      eventBus.$emit('自定义事件名称')

      // 如果需要传递额外的数据参数，就从第2个参数开始传
      eventBus.$emit('自定义事件名称', 123)
    }
  }
}

注意，通信的双向的：

• a 给 b 发：b 来订阅，a 来发布
• b 给 a 发：a 来订阅，b 来发布

另外，同类型的事件可以订阅多次：

eventBus.$on("abc", () => {
  console.log("abc1");
});

eventBus.$on("abc", () => {
  console.log("abc2");
});

eventBus.$on("ddd", () => {
  console.log("ddd");
});

eventBus.$emit("abc"); // abc1、abc2

eventBus.$emit("ddd"); // ddd

eventBus.$emit("hello"); // 不会报错，无人响应