大前提是，需要?jiǎng)?chuàng)建一個(gè)事件總線，通常使用vm實(shí)例本身作為事件總線，并把他在一定的時(shí)機(jī)保存在Vue構(gòu)造函數(shù)的原型對(duì)象中，因?yàn)榻M件實(shí)例的原型對(duì)象的原型對(duì)象=vue實(shí)例的原型對(duì)象，所以這樣所有的組件實(shí)例都是獲取到事件總線。

1.B（接收方）需要往事件總線總綁定一個(gè)自定義事件，并設(shè)置事件回調(diào)。

2.A（發(fā)送方）想要發(fā)送數(shù)據(jù)時(shí)，只需觸發(fā)B在事件總線綁定的自定義事件，并把數(shù)據(jù)傳過(guò)去即可。

在這里插入圖片描述

main.js：

//引入vue依賴
import Vue from 'vue'
//引入組件App
import App from './App.vue'

// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false

//創(chuàng)建一個(gè)vue實(shí)例
new Vue({
  render: h => h(App),
  beforeCreate(){
    //通常在beforeCreate生命周期函數(shù)中進(jìn)行事件總線的設(shè)置。
    //下面代碼就是把vm對(duì)象本身設(shè)置到Vue的原型對(duì)象中，屬性名通常是$bus,這個(gè)不強(qiáng)制
    Vue.prototype.$bus = this;
  }

  //配置該vue實(shí)例管理id為app的容器
}).$mount('#app')

在這里插入圖片描述

App.vue：

<template>
    <!-- 編寫結(jié)構(gòu) -->
    <div>
        <A></A>
    <hr>
    <B></B>
    </div>
</template>

<script>


//修改后的
//引入A組件和B組件,涉及es模塊化的語(yǔ)法
import A from "./components/A.vue"
import B from "./components/B.vue"

export default {


    components:{
        //注冊(cè)組件
        A,
        B
    }
}
</script>

<style>

</style>

B.vue：

<template>
    <div>
        <div>B組件的名稱：{{name}}</div>
        <div>A組件的名稱：{{NameForA}}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:"yehaocong",
            NameForA:""
        }
    },
    methods:{
        //觸發(fā)事件時(shí)的回調(diào)函數(shù)
        getNameFromA(nameFromAVC){
            console.log("接收來(lái)自A組件的名稱：",nameFromAVC);
            this.NameForA = nameFromAVC;
        }
    },
    mounted() {
        //往事件總線總綁定自定義事件。
        this.$bus.$on("getNameFromA",this.getNameFromA);
    },
    beforeDestroy() {
        //通常在組件銷毀時(shí)，需要解綁自定義事件。
        this.$bus.$off("getNameFromA")
    },
}
</script>

<style>

</style>

在這里插入圖片描述

A.vue：

<template>
    <div>
        <div>{{name}}</div>
        <button @click="sendName">發(fā)送name屬性值到其他組件</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:"liaoxianyan"
        }
    },
    methods: {
        sendName(){
            //發(fā)送方觸發(fā)事件
            this.$bus.$emit("getNameFromA",this.name);
        }
    },
}
</script>

<style>

</style>

在這里插入圖片描述