关于Vue非父子组件通信遇到的细节问题

简介: 本文讨论了Vue中非父子组件通信的一个细节问题,即当使用事件总线($eventsBus)进行通信时,需要确保两个组件能够同时在页面上显示,否则可能无法正确触发和监听事件。作者通过组件A和B的例子说明了这一点,并指出解决方案是在一个共同的父组件C中监听事件。

非父子组件通信可以用在任何两个组件之中

需要特别注意的地方:
就是这两个组件需要同时被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);
    });

在这里插入图片描述
在这里插入图片描述
因为不是出于同一页面上,那个时候要监听的页面还没有渲染完成,更别说监听事件了。

目录
相关文章
|
13小时前
|
JavaScript
Vue3基础(23)___vue3非父子组件之间的通信
本文介绍了Vue 3中非父子组件间通信的方法,通过创建一个事件集合对象和相应的触发监听函数,实现跨组件的事件传递和监听。
8 0
|
4月前
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
|
4月前
|
JavaScript
vue父子组件之间通讯方式
vue父子组件之间通讯方式
25 2
|
4月前
|
JavaScript API
Vue3中的父子、子父组件通信
Vue3中的父子、子父组件通信
72 0
|
4月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
41 0
|
4月前
|
JavaScript API
Vue3父子组件通讯
Vue3父子组件通讯
71 0
|
JavaScript 索引
【Vue】父子组件通信
【Vue】父子组件通信
【Vue】父子组件通信
|
JavaScript 编译器
【Vue3 第十四章】父子组件通信
【Vue3 第十四章】父子组件通信
148 0
VUE3_非父子组件的通信
VUE3_非父子组件的通信
134 0
|
JavaScript
Vue中父组件与子组件之间的通信
Vue中父组件与子组件之间的通信
185 0