首页 > 其他分享 >vue 祖先组件操作后代组件方法

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

时间:2022-11-01 09:55:39浏览次数:51  
标签:vue holle 祖先 bus 后代 组件

 

 前言:最近写代码遇到一问题:祖先级别的组件怎么操作孙子的儿子的组件方法(是不是已经绕晕了),在网上搜了半天都是父子传参,父子操作,晕晕乎乎的想起了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,holle,祖先,bus,后代,组件
From: https://www.cnblogs.com/houxianzhou/p/16846712.html

相关文章

  • Vue修饰符
    Vue修饰符事件修饰符.stop阻止事件冒泡.self只在点击自身时才会触发对应的事件.prevent阻止事件默认行为.once只会执行一次 .stop阻止事件冒泡......
  • 怎样刷vue面试题
    Vue的优点轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习;双向数据绑定:保留了angular的特......
  • Vue.$nextTick的原理是什么-vue面试进阶
    原理性的东西就会文字较多,请耐下心来,细细品味Vue中DOM更新机制当你气势汹汹地使用Vue大展宏图的时候,突然发现,咦,我明明对这个数据进行更改了,但是当我获取它的时候怎么是上......
  • 这可能是你需要的vue考点梳理
    对React和Vue的理解,它们的异同相似之处:都将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库;都有自己的构建工具,能让你得到一个根据最佳实践......
  • JMETER与它的组件们
    JSON提取器与DebugSampler我们平时会遇到很多JSON格式的接口返回,我们需要提取参数可以用JSON提取器,同时配合自带的调试器来进行调试。 JSON提取器Nameofcreatedva......
  • Vue是怎样监听数组的变化的?
    上周五跟着一个师姐面试一个三年工作经验的前端开发,我在一边谨慎的观摩。想着曾经我也被别人面试过,如今面试别人,感觉其实心情是一样的。前言工作三年的Vue使用者应该......
  • Vue 中的 Ajax
    1.1使用代理服务器1.1.1方式一在vue.config.js中添加如下配置:devServer:{proxy:"http://localhost:5000"}说明:优点:配置简单,请求资源时直接发给前端(8080)即可......
  • Vue项目小功能:过度~transition
    Vue提供了transition的封装组件,来处理过渡以及动画使用过渡或动画的场景在下列情形中,可以给任何元素和组件添加进入/离开过渡条件渲染(使用v-if)条件展示(使用v-sh......
  • 使用Vue框架修改表单数据回显失败的一种情况
    今天在完成项目的某个模块的修改业务时,数据没有回显在表单里js文件constdefaultForm={processNo:'',name:'',reasons:'',overtimeStart:'',overti......
  • SpringCloudAlibaba 主要组件与nacos 填坑记录
    SpringCloudAlibaba主要功能与实现组件(1)SpringCloudAlibaba主要功能与实现组件【功能与实现组件:】服务限流降级:基本说明:默认支持WebServlet、WebF......