Vue組件之事件總線和消息發(fā)布訂閱詳解

更新時間：2022年02月16日 11:49:33 作者：我會努力變強的

這篇文章主要為大家詳細介紹了Vue組件之事件總線和消息發(fā)布訂閱，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

簡介

主要介紹事件總線的定義和編寫方法和Vue是如何實現(xiàn)消息的訂閱與發(fā)布的。

事件總線

事件總線是組件間通信的一種方式，適用于任意組件間的通信，比如毫不相干的兩個組件、父子組件間、后代組件等等，都能通信。

事件總線有兩個特性：

是一個vue組件實例或者一個vue實例，充當一個消息中轉(zhuǎn)站，如果A、B組件想要通信，那么A組件存消息到中轉(zhuǎn)站，B消息拿，或者反過來。
所有組件都要能獲取到事件總線。

如果A、B組件間通信，如果A發(fā)送數(shù)據(jù)給B的情況下，需要以下步驟：

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

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

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

在這里插入圖片描述

main.js：

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

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

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

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

在這里插入圖片描述

App.vue：

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

<script>


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

export default {


    components:{
        //注冊組件
        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ā)事件時的回調(diào)函數(shù)
        getNameFromA(nameFromAVC){
            console.log("接收來自A組件的名稱：",nameFromAVC);
            this.NameForA = nameFromAVC;
        }
    },
    mounted() {
        //往事件總線總綁定自定義事件。
        this.$bus.$on("getNameFromA",this.getNameFromA);
    },
    beforeDestroy() {
        //通常在組件銷毀時，需要解綁自定義事件。
        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>

在這里插入圖片描述