关于Vue非父子组件通信遇到的细节问题
2023-09-27 14:22:48 时间
非父子组件通信可以用在任何两个组件之中
需要特别注意的地方:
就是这两个组件需要同时被router-view输出,用最简单的话就是需要能同时在页面上显示
我现在有两个组件
A B
组件A和B分别对应两个路由
在A中触发事件
在B中监听事件
A:
eventsClick(){
this.$eventsBus.$emit('eventsClick','zjq')
this.$router.push('/B')
}
B:
this.$eventsBus.$on("eventsClick", res => {
console.log(res);
alert(res);
});
这样的情况是不会触发的
而当我们B的监听事件写在和A能同时渲染的页面C上 就可以触发
C:
this.$eventsBus.$on("eventsClick", res => {
console.log(res);
alert(res);
});
因为不是出于同一页面上,那个时候要监听的页面还没有渲染完成,更别说监听事件了。
相关文章
- Vue 父子组件之间的通信
- 【Vue】Vue-cli(脚手架)中的main.js内容解读
- Vue组件通信
- Vue - 列表拖曳排序 / 鼠标拖动改变顺序排列高效简洁组件(支持PC端与移动端触屏拖动,也可在滚动条内排序自动滚动,流畅丝滑无 BUG)
- Vue - DevTools Open DevTools and look for the Vue panel(控制台没有 Vue 选项卡)
- Vue - 兄弟组件通信(eventBus)
- Vue - 通俗易懂的组件通信问题(父子传值)
- Vue项目--FLoor组件的实现
- Vue组件间的通信【子传父,父传子,同级传递,爷孙传递】
- 来吧!一文彻底搞定Vue组件!
- Vue源码探究-事件系统
- vue 组件 模板中根数据绑定需要指明路径并通信父
- 15个 Vue 技巧,开发有段时间了,才知道还能这么用(你所知道真的包括这些吗?)
- Vue Provide / Inject 详细介绍(跨组件通信、响应式变化、版本变化)
- Vue知识点总结(13)——组件通信-平行传值(超级详细)
- vue封装一个左滑删除的组件
- vue组件异步渲染
- vue前台(二)在路由配置项中,配置meta属性来影藏组件
- SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
- vue组件终端报错: error Component name “xxx“ should always be multi-word vue/multi-word-component-names
- 初识vue小案例