Vue Bus匯流排詳解

Vue bus匯流排，一個輕量級的事件中心，常用於跨組件通信，是Vue.js官方推薦的一種應用程序架構方式。Vue Bus匯流排提供了想不到的靈活性，可以被用於很多不同場景，在這篇文章中，我會從幾個方面詳細講解Vue Bus匯流排的用法和原理。

一、Vue Bus匯流排簡介

Vue Bus匯流排就是一個事件系統，用於組件之間的通信，值得一提的是，Vue Bus匯流排既可以當做事件系統使用，也可以當做數據或消息的傳遞中心。Vue Bus匯流排發起事件的組件成為發送組件，監聽並響應事件的組件成為接收組件。

二、Vue Bus匯流排實現

Vue Bus匯流排的實現有很多種，這一節中我們將介紹兩種主要方式。

1. Event Bus

Vue Bus匯流排的最簡單的實現是通過Event Bus。Event Bus是一個Vue實例，有自己的屬性、方法和生命周期函數，它可以被註冊，也可以被註銷。

    
        const EventBus = new Vue()
        // 聲明
        EventBus.$on('eventName', (arg) => {
            console.log(arg)
        })
        // 觸發
        EventBus.$emit('eventName', 'Hello World!')
    

2. Provide/Inject

另一種實現方式是使用Vue提供的Provide/Inject，這種方式與Event Bus類似，但是Provide/Inject是使用了Vue自帶的provide和inject選項，可自動化繼承。provide選項是一個函數，返回一個對象作為註冊變數。inject選項可以在嵌套層級即可使用。

    
        const EventBus = {
            install(Vue) {
                Vue.prototype.$bus = new Vue()
            }
        }
        export default EventBus

        // 在發送組件中
        methods: {
            handleClick() {
                this.$bus.$emit('eventName', 'Hello World!')
            }
        }

        // 在接收組件中
        inject: ['$bus'],
        created() {
            this.$bus.$on('eventName', (arg) => {
                console.log(arg)
            })
        }
    

三、Vue Bus匯流排應用

1. 父子組件之間的通信

父子組件間通信一般通過props和事件調用實現，但是當嵌套的組件層次很多的時候，這種方式會變得很繁瑣，這時候使用Vue Bus匯流排會很方便。

// 父組件
原創文章，作者：RQAYW，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/372525.html