Event Bus--非父子组件通信方式

1.首先, 新建一个 bus.js, 使用一个空的 Vue 实例作为事件总线

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

2.新建两个组件

2.1建a组件--a.vue

<template>
  <div class="aa">
	{{msg}}
	<button @click="toBus">子组件传给兄弟组件</button>
  </div>
</template>

<script>
import Bus from "../bus";// 引入bus.js
export default {
  name: "aa",
  data() {
    return {
      msg: "this is aa component"
    };
  },
  methods: {
    toBus() {
      Bus.$emit("on", "data from aa component");// 发送 `on` 事件
    }
  }
};
</script>

<style scoped>
</style>

2.2建b组件--b.vue

<template>
  <div class="bb">
      {{msg}}
  </div>
</template>

<script>
import Bus from "../bus";// 引入bus.js
export default {
  name: "bb",
  data() {
    return {
      msg: "this is bb component"
    };
  },
  mounted() {
    Bus.$on("on", msg => { // 监听 `on` 事件
      this.msg = msg;
    });
  }
};
</script>

<style scoped>
</style>

3.展示渲染

<template>
  <div class="hello">
    <A></A>
    <B></B>
  </div>
</template>

<script>
import A from './a.vue'
import B from './b.vue'
export default {
  name: 'HelloWorld',
  components:{
    A,
    B
  }
}
</script>

<style scoped>
</style>

点击 a 组件中的按钮，就会发现 b 中的 msg 变成了 data from aa component