时间戳

首页 > 解决方案 > 防止 $emit 在 Vue 中多次发射

vue.js - 防止 $emit 在 Vue 中多次发射

问题描述

我在我的 Vue 项目中有一个发出调用来更新搜索结果，但是发出至少被调用了 4 次，因为发出调用是在不同的地方定义的，所以数据有时是随它发出的，而在其他地方则不是.

我正在使用全局总线来执行发射。

this.$root.bus.$emit('resetValuesInInfiniteLoader', filteredEntities);

this.$root.bus.$on('resetValuesInInfiniteLoader', function (filteredEntities) {});

我尝试以不同的方式命名发出调用，并且还尝试使用不同的全局 vue 总线，但是这两个选项都不能很好地工作。知道如何以有效的方式执行此操作，以便始终只调用一次 $emit 吗？我需要如何设置它以确保发出总是只被调用一次？我也尝试过使用 $once，但它不起作用，或者试图破坏 $emit。有人可以给我一个小小提琴的例子，也许这样我就知道如何以正确的方式做到这一点？

标签： vue.jseventemitterbus

解决方案

我发现情况也是如此，并且觉得在多个位置使用它存在一些问题。我的理解是，在大多数应用程序中不建议使用全局事件总线，因为它们会导致事件混乱。建议您使用像 vuex 这样的状态管理解决方案。

但无论如何，上面的代码只有几点。我不知道你是如何创建你的总线的，但我知道这样创建它：

//main.js

const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

这创造了它并使其成为全球性的。然后可以在一个或多个组件中触发它：

<button @click="$bus.$emit('my-event')">click</button>

or

methods: {
    triggerMyEvent () {
      this.$bus.$emit('my-event', { ... pass some event data ... })
    }
  }

并聆听：

created () {
            this.$bus.$on('my-event', ($event) => {
                console.log('My event has been triggered', $event)
                this.eventItem = 'Event has now been triggered'
                //this.$bus.$off('my-event')
            })

        },

我发现它有时会起作用。我不知道为什么，但它会起作用，然后它会触发几个事件，我认为这是因为它尚未最终确定或其他原因。您可能会注意到我已将 this.$bus.off 注释掉，这肯定会停止它，但它不会再次起作用。所以我不知道那是怎么回事。

所以你去了，完全没有答案，比如，是的，我也有过，不，我无法修复它。

推荐阅读