Vue事件总线

一 项目结构

二 main.js

import Vue from "vue";
import App from "./App.vue";
import Toolkit from "./plugins/toolkit";

Vue.config.productionTip = false;

Vue.use(Toolkit);

new Vue({
  render: h => h(App)
}).$mount("#app");

三 toolkit.js

export default {
  install(Vue, options) {
    // 方法一：修改Vue构造函数的原型链
    Vue.prototype.$eventBus = new Vue();
    // 方法二：注册全局事件总线
    // window.eventBus = new Vue();
  }
};

四 App.vue

<template>
  <div id="app">
    <fish/>
    <cat/>
  </div>
</template>

<script>
import Vue from "vue";
import Fish from "./components/Fish";
import Cat from "./components/Cat";
export default {
  name: "app",
  components: { Fish, Cat }
};
</script>

<style>
</style>

五 Fish.vue

<template>
    <div>
        <h3>鱼