文章插图
前言：最近写代码遇到一问题：祖先级别的组件怎么操作孙子的儿子的组件方法（是不是已经绕晕了
原理就是：是在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 祖先组件操作后代组件方法】
经验总结扩展阅读
- 京东云开发者｜关于“React 和 Vue 该用哪个”我真的栓Q
- JMETER与它的组件们
- 20 基于SqlSugar的开发框架循序渐进介绍-- 在基于UniApp+Vue的移动端实现多条件查询的处理
- vue中动态引入图片为什么要是require， 你不知道的那些事
- 17_Vue列表过滤_js模糊查询
- UEC 利用代理/委托写一个生命组件
- 下 Vitepress搭建组件库文档—— 组件 Demo
- 8_vue是如何进行数据代理的
- h函数 vue3渲染函数的变化
- 微信小程序仿手机相册组件——简单版