Vuejs2 Vue 2自定义选择2:为什么在@input工作时@change不工作

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

我的问题是：为什么会这样

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

---

原因是您正在侦听组件上的事件，而不是实际的DOM节点。组件上的事件将引用

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

请注意，Vue的事件系统与浏览器的EventTarget API是分开的。尽管它们的工作方式类似，$on和$emit不是addEventListener和dispatchEvent的别名

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

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

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

指出了原因，但实际上您可以将更新事件作为道具传递给子组件。检查下面的演示

Vue.component'select2'{ 模板：“值1值2”， 道具：[‘改变’] } 新Vue{ el:“应用程序”， 方法：{ 一旦改变{ 控制台。登录“更改”； } } }; 自定义选择

默认选择

值1 价值2 我添加了vm@emit'change'，newValue；在下一步中，点击让我的select2组件收听@change事件您的回答很好，但是：change与@change仍然是不同的行为。特里的回答为我指明了正确的方向，可以“修复”组件的行为。

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