时间戳

首页 > 解决方案 > Vue 3 - 发出原始值不会触发输入？

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

问题描述

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

该组件用于将值绑定到 v-model，因此它通过“this.$emit('input', this.value)”发出输入。

由于 Vue 3 将输入更改为 update:modelValue，因此我进行了此修改并另外向组件提供了“Emits”-property-list。一切似乎都在工作......

但后来我意识到 Vue-multiselect 3（NPM 包“vue-multiselect”：“^3.0.0-alpha.2”）正在发出原始值，一个整数，它不会触发父组件上的@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 时，似乎“文本”类型的字段会触发事件侦听器，但多选不会。这些组件的唯一区别是多选发送原始值（整数），而输入发送事件对象。

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

标签： javascriptvue.jsvuejs3emit

解决方案

从您的问题来看，您似乎已经阅读了 Vue 3 迁移指南 - 特别是关于更改v-model自定义组件的部分并将您更改form-input为发出update:modelValue事件而不是input事件

那么为什么要使用而不是监听组件的更新form-input呢？@input@update:modelValue

@input放置在父组件上的唯一原因form-input是由于此更改

简而言之 - 因为您的组件声明它发出update:modelValue事件（使用emits选项），所以放置在其上的每个其他事件侦听器都直接绑定到组件的根元素 -<input>在这种情况下为原生

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

推荐阅读