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

2022-12-09,,,,

前言:最近写代码遇到一问题:祖先级别的组件怎么操作孙子的儿子的组件方法(是不是已经绕晕了),在网上搜了半天都是父子传参,父子操作,晕晕乎乎的想起了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的使用和理解,有写的不到位的地方,还望各位指正,留言区欢迎大家发言评论哦!!!

vue 祖先组件操作后代组件方法的相关教程结束。

《vue 祖先组件操作后代组件方法.doc》

下载本文的Word格式文档,以方便收藏与打印。