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

發(fā)布時(shí)間：2022-03-04 10:09:48 來(lái)源：億速云閱讀：130 作者：小新欄目：開發(fā)技術(shù)

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

簡(jiǎn)介

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

事件總線

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

事件總線有兩個(gè)特性：

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

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

大前提是，需要?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ò)去即可。

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

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')

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

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>

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

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>

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