el-tabs组件使用EventBus引发的重复执行问题

2020-08-18  本文已影响0人  linqii

问题描述
  在a页面使用elementUI中的 el-tabs组件,并且子元素 el-tab-pane 也是用 v-if控制显示隐藏的,在mounted 里$on 了一个方法,b页面使用$emit去触发这个方法。如果在a页面点击多个tab后,在b页面去触发方法就会触发多次。

//a.vue
mounted(){
    EventBus.$on('refreshShopList', queryData => {
            this.getShopList(queryData)
        })
}
//b.vue
//刷新线索池
refreshShopList(){
    EventBus.$emit('refreshShopList')
},

原因
  页面不强制刷新,组件切换,EventBus.$on方法会被多次绑定,造成事件多次触发。

解决思路
  在每次调用方法前先解绑事件(EventBus.$off),然后再重新绑定( EventBus.$on)。

//a.vue
mounted(){
    EventBus.$off('refreshShopList')
    EventBus.$on('refreshShopList', queryData => {
            this.getShopList(queryData)
        })
}
上一篇 下一篇

猜你喜欢

热点阅读