這篇文章給大家介紹Vue 中怎么實現非父子組件通信，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
Vue 官網介紹了非父子組件通信方法：
不過官網說的太簡單了，新手看完估計還是一臉懵逼。還有這個空的 Vue 實例放到哪里合適也值得商榷。
這篇文章的目的就是用一個簡單的例子讓你明白如何用 Bus ? 來進行通信：
假設 bb 組件里面有個按鈕，點擊按鈕，把 123 傳遞給 aa 組件
// 根組件（this.$root)
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的實例放到根組件下，所有的子組件都能調用
Bus: new Vue()
}
})bb 組件內調用事件觸發↓
<button @click="submit">提交<button>
methods: {
submit() {
// 事件名字自定義，用不同的名字區別事件
this.$root.Bus.$emit('eventName', 123)
}
}aa 組件內調用事件接收↓
// 當前實例創建完成就監聽這個事件
created(){
this.$root.Bus.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在組件銷毀時別忘了解除事件綁定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},關于Vue 中怎么實現非父子組件通信就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
