防止 $emit 在 Vue 中多次发出

Question

我的 Vue 项目中有一个 emit 调用来更新搜索结果，但是至少调用了 4 次，因为 emit 调用是在不同的位置定义的，所以数据有时会随它一起发出，并且在其他地方不是。

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

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

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

我尝试以不同的方式命名 emits 调用，还尝试使用不同的全局 vue 总线，但这两种选择都不太奏效。知道如何以有效的方式执行此操作，以便始终只调用一次 $emit 吗？我需要如何设置它以确保 emit 总是只被调用一次？我还尝试使用 $once，但没有用，或者试图破坏 $emit。有人可以给我一个 fiddle 的小例子，这样我就可以理解如何以正确的方式做到这一点吗？

Answer 1

我也发现了这种情况，并且觉得在多个位置使用它存在一些问题。我的理解是，在大多数应用程序中不推荐使用全局事件总线，因为它们会导致混乱的事件。推荐大家使用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 这肯定会停止它，但它不会再次工作。所以我不知道这是怎么回事。

好了，完全没有答案，就像，是的，我也遇到过，不，我无法修复它。

Answer 2

我开始使用 vuex store，它似乎更容易与应用程序中的任何组件进行通信，具有全局通信的优势，但没有发送多个操作（例如发出事件）的警告

防止 $emit 在 Vue 中多次发出

Prevent $emit from emitting more than once in Vue

bus

eventemitter

vue.js