Vue元件之事件匯流排和訊息釋出訂閱詳解

2022-02-16 13:00:13

簡介

主要介紹事件匯流排的定義和編寫方法和Vue是如何實現訊息的訂閱與釋出的。

事件匯流排

事件匯流排是元件間通訊的一種方式，適用於任意元件間的通訊，比如毫不相干的兩個元件、父子元件間、後代元件等等，都能通訊。

事件匯流排有兩個特性：

是一個vue元件範例或者一個vue範例，充當一個訊息中轉站，如果A、B元件想要通訊，那麼A元件存訊息到中轉站，B訊息拿，或者反過來。
所有元件都要能獲取到事件匯流排。

如果A、B元件間通訊，如果A傳送資料給B的情況下，需要以下步驟：

大前提是，需要建立一個事件匯流排，通常使用vm範例本身作為事件匯流排，並把他在一定的時機儲存在Vue建構函式的原型物件中，因為元件範例的原型物件的原型物件=vue範例的原型物件，所以這樣所有的元件範例都是獲取到事件匯流排。

1.B（接收方）需要往事件匯流排總繫結一個自定義事件，並設定事件回撥。

2.A（傳送方）想要傳送資料時，只需觸發B在事件匯流排繫結的自定義事件，並把資料傳過去即可。

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

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>

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>