vue组件通信方式之父子、隔代、兄弟组件通信($emit/$on)

Bus，通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
注意：记得销毁自定义事件，否则容易造成内存泄露。
基本使用
具体实现方式：

var Bus = new Vue();

Bus.$emit("add-todo", { text: this.newTodoText });
Bus.$on("add-todo", this.addTodo);
Bus.$off("add-todo", this.addTodo);
使用 vue-bus：npm install vue-bus --save
import Vue from "vue";
import VueBus from "vue-bus";

Vue.use(VueBus);
Listen and clean
// ...
created() {
  this.$bus.on('add-todo', this.addTodo);
  this.$bus.once('once', () => console.log('This listener will only fire once'));
},
beforeDestroy() {
  this.$bus.off('add-todo', this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}
Trigger
// ...
methods: {
  addTodo() {
    this.$bus.emit('add-todo', { text: this.newTodoText });
    this.$bus.emit('once');
    this.newTodoText = '';
  }
}

举个栗子
假设兄弟组件有三个，分别是 A、B、C 组件，A 或 B 组件的向 C 组件发送数据。
组件 A：

<template>
  <div>
    <div>{{name}}</div>
    <button @click="postData">发给C</button>
  </div>
</template>

<script>
  export default {
    name: "child-a",
    data: () => ({
      name: "AAA"
    }),
    methods: {
      postData() {
        this.$bus.emit("child-a", this.name);
      }
    }
  };
</script>

组件 B：

<template>
  <div>
    <div>{{name}}</div>
    <button @click="postData">发给C</button>
  </div>
</template>

<script>
  export default {
    name: "child-b",
    data: () => ({
      name: "BBB"
    }),
    methods: {
      postData() {
        this.$bus.emit("child-b", this.name);
      }
    }
  };
</script>

组件 C：

<template>
  <div>
    <div>{{ name.join(",") }}</div>
  </div>
</template>

<script>
  export default {
    name: "child-c",
    data: () => ({
      name: ["CCC"]
    }),
    created() {
      this.$bus.on("child-a", this.getData);
      this.$bus.on("child-b", this.getData);
    },
    beforeDestroy() {
      this.$bus.off("child-a", this.getData);
      this.$bus.off("child-b", this.getData);
    },
    methods: {
      getData(data) {
        this.name.push(data);
      }
    }
  };
</script>

this.bus.on监听了自定义事件child−a和child−b，因为有时不确定何时会触发事件，一般会在created钩子中来监听，然后beforeDestroy钩子中通过this.bus.on监听了自定义事件child−a和child−b，因为有时不确定何时会触发事件，一般会在created钩子中来监听，然后beforeDestroy钩子中通过this.bus.off注销自定义事件。
vue-bus 实现源码
最后看一下 vue-bus 的源码：

function VueBus(Vue) {
  var bus = new Vue();

  Object.defineProperties(bus, {
    on: {
      get: function get() {
        return this.$on.bind(this);
      }
    },
    once: {
      get: function get() {
        return this.$once.bind(this);
      }
    },
    off: {
      get: function get() {
        return this.$off.bind(this);
      }
    },
    emit: {
      get: function get() {
        return this.$emit.bind(this);
      }
    }
  });

  Object.defineProperty(Vue, "bus", {
    get: function get() {
      return bus;
    }
  });

  Object.defineProperty(Vue.prototype, "$bus", {
    get: function get() {
      return bus;
    }
  });
}