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

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

井井客