zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

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);
    });

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