vue 祖先組件操作後代組件方法

• 2022 年 11 月 1 日
• 筆記
• VUE

 前言：最近寫代碼遇到一問題：祖先級別的組件怎麼操作孫子的兒子的組件方法（是不是已經繞暈了），在網上搜了半天都是父子傳參，父子操作，暈暈乎乎的想起了bus(事件總線)，

原理就是：是在vue原型上掛載（生命周期為實例創建之前beforcreate），通過這個實例里的事件派發和事件監聽實現跨組件通信，設計模式叫做觀察者模式(vue上就有$on，$emit 、$off)。

話不多說了，直接看代碼吧

一、首先

// 在 src/mian.js 

new Vue({
    router,
    store: new Vuex.Store(Store),
    el: '#app',
    render: h => h(App),
    beforeCreate(){
	Vue.prototype.$bus = this  //安裝全局事件總線
     }
})

二、在觸發事件的的祖先組件方法內　

this.$bus.$emit("holle",666)

三、後代組件（不限於後代，就是任何組件）接受傳參

mounted() {
			
			this.$bus.$on("holle",(data)=>{
				console.log(data)  //666
			})
		},

四、一定要在接收的組件銷毀鉤子里卸載掉

beforeDestroy() {
			this.$bus.$off("holle")
		},

　總結：以上就是我對bus的使用和理解，有寫的不到位的地方，還望各位指正，留言區歡迎大家發言評論哦！！！