Vue組件中事件總線和消息發布訂閱的示例分析

發布時間：2022-03-04 10:09:48 來源：億速云閱讀：131 作者：小新欄目：開發技術

小編給大家分享一下Vue組件中事件總線和消息發布訂閱的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

簡介

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

事件總線

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

事件總線有兩個特性：

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

如果A、B組件間通信，如果A發送數據給B的情況下，需要以下步驟：

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

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

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

Vue組件中事件總線和消息發布訂閱的示例分析

main.js：

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

// 關閉生產提示
Vue.config.productionTip = false

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

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

Vue組件中事件總線和消息發布訂閱的示例分析

App.vue：

<template>
    <!-- 編寫結構 -->
    <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:{
        //觸發事件時的回調函數
        getNameFromA(nameFromAVC){
            console.log("接收來自A組件的名稱：",nameFromAVC);
            this.NameForA = nameFromAVC;
        }
    },
    mounted() {
        //往事件總線總綁定自定義事件。
        this.$bus.$on("getNameFromA",this.getNameFromA);
    },
    beforeDestroy() {
        //通常在組件銷毀時，需要解綁自定義事件。
        this.$bus.$off("getNameFromA")
    },
}
</script>

<style>

</style>

Vue組件中事件總線和消息發布訂閱的示例分析

A.vue：

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

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

<style>

</style>

Vue組件中事件總線和消息發布訂閱的示例分析