Question

我在Vue项目中有一个emit调用来更新搜索结果，但是emit被调用了至少4次，因为emit调用是在各个位置定义的，因此数据是随它和其他位置一起发出的不是。

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

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

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

我尝试用不同的方式命名emits调用的名称，并且尝试使用其他全局vue总线，但是这两种方法都不能很好地工作。知道如何高效地执行此操作，以便$ emit始终仅被调用一次吗？我如何设置它以确保发射始终仅被调用一次？我还尝试使用了无效的$ once，或试图销毁$ emit。有人可以给我一个小提琴的例子吗，也许这样，以便我了解如何以正确的方式做到这一点？

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存储，与应用程序中的任何组件进行通信似乎要容易得多，具有全局通信的优势，但没有发出诸如发出事件之类的多个动作的警告

防止$ emit在Vue中发出多次

2 个答案: