Vue 3-发出原始值不会触发输入？

Question

我在Vue3 $emit上遇到了一个奇怪的问题。我正在重构我自己的Vue2“表单输入”-component，它基本上是一个包装器，用于呈现文本输入、(多)选择选项、文本区域或任何其他基本输入字段。

此组件用于将值绑定到v模型，因此它通过"this.$emit(' input '，this.value)“发出输入。

由于Vue 3将输入更改为update:modelValue，因此我进行了此修改，并将"Emits“-property-list额外呈现给组件。一切看起来都很正常...

但是后来我意识到Vue-multiselect 3 (NPM package "vue-multiselect"："^3.0.0-alpha.2")发出的是一个原始值，一个整数，它不会在parent-component上触发@input。

​

form-input.vue

<input v-if="resolveType === 'text' || resolveType === 'number' || resolveType === 'tel' || resolveType === 'email'"
             v-model="localValue"
             @input="$emit('update:modelValue', $event.target.value)"
/>

<multiselect v-model="localValue"
             class="full-width-tags"
             @update:model-value="$emit('update:modelValue', $event)"
/>

// Please note that multiselects $event is an integer, I have checked this multiple times from console.log

​

..。当我在父组件上侦听@input时，它看起来像是"text"-type字段触发了事件侦听器，但multiselect不会，这些组件上唯一的区别是multiselect发出原始值(整数)，而input发送一个事件对象。

有人能解释一下为什么事件对象和原始值在@input中有不同的处理方式吗?我该如何修复我的多选emit，让它发出输入？目前，我正在为多选一个接一个地发出"update:modelValue“和"input”-events，但我只是想知道是否有更简单的方法？

Answer 1

从您的问题看，您似乎已经阅读了Vue 3迁移指南-特别是the part about change of v-model on custom components，并将form-input更改为发出update:modelValue事件而不是input事件

为什么要使用form-input @input 而不是form-input 来监听组件上的更新

放置在父组件中的form-input组件上的@input之所以能够工作，唯一的原因是因为this change

简而言之，因为您的组件声明它发出update:modelValue事件(使用emits选项)，所以放置在它上的每个其他事件侦听器都直接绑定到组件本机<input>的根元素

这不是你想要的。只需将<form-input @input="..." />更改为<form-input @update:modelValue="..." />