H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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的,也就是销毁不了这个事件,可以在componentbeforeDestory或者是destory事件中,也就是在组件销毁的时候手动执行下bus.$off("change_app_charts"),手动销毁事件

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

回答:

有个奇妙的问题,你change_app下的if逻辑会执行么?

回答:

可以移除事件的,在destroyed生命周期中,调用bus.$off

回答:

http://www.jianshu.com/p/fde8…

回答:

楼上说的没错,通过beforeDestory钩子函数,bus.$off进行注销

本文地址:H5W3 » vue中event bus被触发多次问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址