Event Bus 兄弟组件传参 ( 不相关的组件之间传值 )

通常父子之间传值比较方便 通过 props 和 $emit 实现

兄弟之间传值无法实现

对于一些没有用到 vuex 的项目就可以使用 Event Bus 来实现

Event Bus 简单使用

1. 首先创建 一个 js 文件 作为一个载体
2. 引入 vue 新建 Event Bus 并导出
3. 通过 $emit 和 $on 实现页面之间的通信

上代码 ~~~~

1. 新建eventBus.js文件中 初始化

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

2. 组件中引入 Event Bus 文件 发送事件

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
  // 通过事件发送事件  第二个参数为发送的数据
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

3. 组件中引入 Event Bus 文件 接收事件

<!-- B.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  created() {
  // 接收 A 发送的事件
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

ok 完成 A B 两个不相关的页面关联了起来

这只是简单的使用 大家多提建议