在Vue中,我們可以通過(guò)自定義事件實(shí)現(xiàn)組件間的通信。Vue提供了一個(gè)$emit方法來(lái)分發(fā)自定義事件,在組件內(nèi)部使用$emit方法觸發(fā)一個(gè)自定義事件后,我們可以在父組件中通過(guò)v-on指令監(jiān)聽(tīng)這個(gè)事件,實(shí)現(xiàn)組件間的通信。
但是,在某些情況下,我們需要在子組件內(nèi)部觸發(fā)自定義事件,然后由父組件處理這個(gè)事件。Vue允許我們通過(guò)$parent來(lái)訪(fǎng)問(wèn)父組件實(shí)例,但是這種方式可能會(huì)導(dǎo)致代碼的復(fù)雜性增加,也可能會(huì)導(dǎo)致父子組件之間的耦合度增加。
為了解決這個(gè)問(wèn)題,Vue還提供了一個(gè)$bus方法來(lái)實(shí)現(xiàn)自定義事件分發(fā)。$bus方法是一個(gè)新的Vue實(shí)例,它可以被用來(lái)分發(fā)任意的自定義事件。我們可以在任意組件中通過(guò)$bus.$emit方法觸發(fā)一個(gè)自定義事件,然后在任意其他組件中通過(guò)$bus.$on方法監(jiān)聽(tīng)這個(gè)事件。
// 創(chuàng)建$bus實(shí)例 var bus = new Vue() // 子組件內(nèi)部觸發(fā)自定義事件 bus.$emit('custom-event', data) // 父組件中監(jiān)聽(tīng)自定義事件 bus.$on('custom-event', function(data) { // 處理自定義事件 })
需要注意的是,使用$bus方法可能會(huì)影響應(yīng)用程序的性能,因?yàn)樗鼤?huì)創(chuàng)建一個(gè)新的Vue實(shí)例。因此,我們應(yīng)該盡可能地避免在頻繁更新的組件中使用$bus方法,以避免性能問(wèn)題。