Vue 2自定义select2：为什么@input工作时@change不起作用

Question

我为Vue 2创建了一个自定义的select2输入元素。

我的问题是：为什么

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

工作，但是

<select2 v-model="vacancy.staff_member_id" @change="update(vacancy)"></select2>

不？

由于<input>Vue中的普通元素具有@change处理程序，因此如果我的自定义select2输入具有相同的效果会很好。

---

有关我的自定义元素的一些信息：

该元素的目的不是呈现所有<option>元素，而是仅呈现所需的那些元素，因为我们在一页上有很多select2输入，而在select2输入内有很多选项，这会导致页面加载变慢。

该解决方案使其速度更快。

<select2 v-model="vacancy.staff_member_id" @input="update(vacancy)"></select2>

Answer 1

原因是因为您正在侦听组件上的事件，<select2>而不是实际的DOM节点。组件上的事件将引用从内部发出的自定义事件，除非您使用.native修饰符。

自定义事件与本机DOM事件不同：它们不会使DOM树冒泡，除非使用.native修饰符，否则无法捕获。从文档：

请注意，Vue的事件系统与浏览器的EventTarget API是分开的。虽然他们同样工作，$on并且$emit不是别名为的addEventListener和dispatchEvent。

如果您查看发布的代码，则会在代码末尾看到：

Vue.nextTick(function(){
    vm.$emit('input', newValue);
});

此代码input在VueJS事件名称空间中发出自定义事件，而不是本机DOM事件。此事件将由您的VueJS组件捕获v-on:input或@input在其上捕获<select2>。相反，由于使用不会change发出任何事件vm.$emit，因此绑定v-on:change永远不会触发，因此您观察不到的非操作。