利用bus方法进行VUE非父子组件间的通信,还需要做这样事:销毁($off),否则可能会有未知bug。
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中使用变量的两种方法整理