井井客

搜索

VUE非父子组件通信

利用bus方法进行VUE非父子组件间的通信,还需要做这样事:销毁($off),否则可能会有未知bug。

VUE非父子组件通信

VUE中我们常说的BUS方法,其实本质就是在当前实例外再创建一个VUE实例。把我们做的单页应用看成第一个VUE实例,那么BUS就是第二个VUE实例,只不过里面没有什么数据。而我们将非父子组件的通信可以放在BUS的这个新的实例子,通过$emit传递,并利用$on进行接受。

不过虽然这样表面是没有问题了,但是在$on接受数据的组件中,尽量还是在生命周期结束时利用$off进行手动取消"监听"。

下面把BUS的一套代码记录下来。第一步先创建一个bus.js文件,内容如下:

import Vue from 'vue'
export default new Vue

然后在需要通信的两端引入这个文件,例如:

import Bus from '@/bus.js’

其中@是webpack配置的src目录别名,你也可以写为相对路径。

在数据传输发起端的组件内使用$emit,例:

Bus.$emit(‘abc’,{
    message:’发送消息’
})

在数据接收端组件内使用$on,例:

Bus.$on(‘abc’,(data)=>{
    console.log(‘接收到的消息为:’+data.message)
})

同时在这个组件销毁状态时(destroyed)进行$off,例如

destroyed() {
    Bus.$off(‘abc’)
}

感觉是不是和父子通信很像呢。只是多了一个新实例的概念吧~只是真的不要忘记$off啦

文章TAG:VUE

作者:井井客原创来源:原创
本文标题:VUE非父子组件通信
本文链接:/c/26318.html

上一篇:sass编译命令
下一篇:正则replace中使用变量的两种方法整理

文章分类

相关阅读

随便看看