this.$root.$emit运行事件两次

Question

我开始使用vue.js，对于我的项目，我看到需要从 vue 的官方网站使用以下select2包装器组件.js这是链接： https://v2.vuejs.org/v2/examples/select2.html 问题是我目前需要发出一个根事件来更改 select2 的值，这就是为什么它在以下部分添加了一行代码：

.on('change', function () {
vm.$emit('input', this.value);
vm.$root.$emit('eventing', this.value);
})

这有效，但我从 vue 的控制台意识到，我的事件被广播了 2 次，我认为这是我的代码问题并删除了添加的行，但输入事件也发出了两次，我的问题是：这是正常行为吗？这样做是一种不好的做法吗？我缺少一些东西。对我来说，这是一个发出两次的问题，因为自从我的事件以来，我正在进行 ajax 调用并且它执行了两次相同的操作。

Answer 1

有一种更简单的方法可以使用 vue 将数据绑定到 select2

：

Vue.directive('select', {
twoWay: true,
bind: function (el, binding, vnode) {
$(el).select2().on("select2:select", (e) => {
// v-model looks for
//  - an event named "change"
//  - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', { target: e.target }));
});
},
});

这绑定到 Vue 实例上的所有选择 以便它们与 v-model 一起使用，您可以使用 select2

之后，将 v-model=" 和 v-select=" 添加到 select2 的目标中，即可设置好。

归功于：更改事件的 Select2 在 Vuejs 中不起作用

Answer 2

尝试在 beforeDestroy...

beforeDestroy() {
this.$root.$off('change', yourFunction)
},