vue 中 eventbus $on 被多次触发

type

Post

status

Published

date

Mar 17, 2023

slug

code-15

summary

category

技术分享

icon

password

Property

Mar 28, 2023 01:26 AM

业务场景：

A 组件中点击 "下载" 按钮，通过 eventbus派发事件 vm.emit('downLoadEvent') ，B 组件接收事件 vm.on('downLoadEvent')，并执行。

问题：

B 组件中，通过 vm.$on 接收的事件被触发两次。大致代码如下：


<script>
   mounted() {
       this.$on('downLoadEvent', () => {
           console.log('downLoadEvent');
       })
   }
</script>

• 在浏览器的开发者工具中，发现 console 打印了两次，导致出现多次下载的情况。

问题分析：

$on 事件不会自动自动清除，导致事件出现累计，出现多次下载。

解决方式：

在 created中手动清除事件。


<script>
    created() {
        this.$off('downLoadEvent');
    }
</script>