vue组件[兄弟通信]

实现vue组件[兄弟通信]

五个步骤：创建、引入、监听、递交、销毁

一、创建

1. 创建EventBus.js：

// 引入
import Vue from 'vue' 
// 创建实例
vueconst EventBus = new Vue() 
// 导出
export default EventBus

二、引用

①. 局部引用：

import eventBus from 'EventBusJS路径地址';

②. 全局引用（绑定在原型上）：

import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()

三、递交

在组件A.vue中定义事件:

this.$EventBus.$emit("传输事件名", 传输B组件的值);

四、监听

在组件B.vue中接收事件:

 this.$EventBus.$on("接收事件名", (值) => {{
       console.log(值)
 }})

五、销毁

在组件B.vue中接收事件后，销毁事件，防止内存溢出:

beforeDestroy() {
    this.$EventBus.$off("接收事件名");
  },

持续更新中