vue.js - vue中event bus被触发多次问题

问题描述

问 题

项目中使用ivew的tree控件（https://www.iviewui.com/compo...），不同组件间通信用vue的event bus，组件一中监听bus事件A，组件二中click事件触发事件A。但是组件二中click时，第一次click触发了一次事件A，往后的任何一个click都会触发两次事件A

相关代码如下：
组件一：

<Tree :data="stree_data" @on-select-change="click_layer"></Tree>

...

methods: {
    click_layer(data){
        if (data[0].type == "dir"){
            data[0].expand = !data[0].expand;
        }else{
            // 加载信息
            // 触发事件A
            console.log("node click begin"); //不会多次打印
            bus.$emit("change_app_charts", data);
        }
    },
}

组件二：

mounted() {
    let _self = this;
    // 响应事件A
    bus.$on("change_app_charts", function(data) {
        console.log("node click"); // 会被多次打印
    })
},

之前event bus的响应都是放在created()里面的，但是奇怪的是这个tree的event bus事件在created()里面注册直接不会响应。但是在mounted()中注册就会导致上面说到的问题，第一次点击正常响应，后面每次点击都会多次响应，想请教其中的原因

---

补充

由于被多次触发，想到被多次注册，然后仔细找原因，因为在点击过程中切换了路由，而每次切换路由（路由中使用了注册事件A的component），把切换路由去掉不再多次响应。

新疑问

但是问题是，切换路由时，路由中的component被创建和销毁，component中的事件不会在component销毁时自动注销掉吗？为啥路由切换会导致重复注册相同的bus event呢？

解决方案

谢邀，我觉得应该是这样子的问题，你的 bus是全局的，在整个页面的生命周期里面的，然后切换路由的时候，component 的生命周期其实是控制不到你 bus的，也就是销毁不了这个事件，可以在component的beforeDestory或者是destory事件中，也就是在组件销毁的时候手动执行下bus.$off("change_app_charts"),手动销毁事件

其实这种全局的事件完全可以用数据去驱动，就用一个全局的变量，在组件中 watch 他的变化然后回调函数，这种不用去关心组件的生命周期和事件，比较自然

这篇关于vue.js - vue中event bus被触发多次问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！