1. 首頁 > 生活百科 > >

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

生活百科


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

文章插圖
前言：最近寫代碼遇到一問題：祖先級別的組件怎么操作孫子的兒子的組件方法（是不是已經繞暈了
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})},四、一定要在接收的組件銷毀鉤子里卸載掉
【vue 祖先組件操作后代組件方法】beforeDestroy() {this.$bus.$off("holle")},　總結：以上就是我對bus的使用和理解，有寫的不到位的地方，還望各位指正 ， 留言區歡迎大家發言評論哦?。。?

    推薦閱讀