vue 总线通信及遇到的坑

总线通信适用于子组件之间的通信

1,首先新建一个文件bus.js image.png
2,在main.js引用
image.png

3，比如从a页面像b页面通过总线传值
a页面为：

 this.$bus.$emit('handleNodeClick',data.label);

b页面接收

 this.$bus.$on('handleNodeClick', (v) => {
        this.headertitle=v
        });

v即为a页面传过来的data.label
总线通信有一个缺点当点击a页面时跳转到b界面时，由于b的监听事件是先于页面执行的，所以数据提前执行会导致页面数据没有变化
解决办法，点击a页面是将数据存入本地缓存，在b界面加载时取出换取
a

getMethod(aa,title){
       
       //路由缓存
        var obj = {"luyou":aa}
     
        localStorage.setItem("luyou",JSON.stringify(obj));
                },

b

 var luyou = JSON.parse(localStorage.getItem("luyou"))

总线通信的另外一个缺点：总线通信多次使用会出现重复调用的情况
解决办法：b页面监听事件之前先销毁

this.$bus.$off('handleNodeClick',this.callback)

image.png