vue eventBus事件总线

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

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

app.vue

<template>
  <div id="app">
    <base-a></base-a>

    <base-b></base-b>
  </div>
</template>

<script>
import BaseA from "@/components/BaseA";
import BaseB from "@/components/BaseB";

export default {
  name: 'App',
  components:{
    BaseA,
    BaseB
  }
}
</script>

<style>

</style>

BaseA.vue

<template>
    <div class="base-a">
        我是A组件（接收方）
        <p>{{ msg }}</p>
    </div>
</template>

<script>
    import Bus from '@/utils/EventBus'

    export default {
        name: "BaseA",
        data(){
          return {
              msg :''
          }
        },
        created(){
            //
            Bus.$on("sendMsg",(msg) => {
                console.log(msg);
                this.msg = msg;
            })
        }
    }
</script>

<style scoped>
    .base-a{
        width: 300px;
        height: 180px;
        border: 2px solid red;
    }
</style>

BaseB.vue

<template>
    <div class="base-b">
        我是B组件（发送方）
        <button @click="clickSend">消息通知</button>
    </div>
</template>

<script>
    import Bus from "@/utils/EventBus";

    export default {
        name: "BaseB",
        methods:{
            //B组件，发送方
            clickSend(){
                Bus.$emit("sendMsg",'今日晴天');
            }
        }
    }
</script>

<style scoped>
    .base-b{
        width: 300px;
        height: 180px;
        border: 2px solid blue;
        margin-top: 20px;
    }
</style>

EventBus.js

//创建事件总线
import Vue from 'vue'

const Bus = new Vue();

export default Bus