带有输入处理程序的 Vue 组件 v-model

Question

<input/>我正在尝试为Vue.js 中的元素制作包装组件。

成分：

<template>
  <div>
    <input v-bind="$attrs" :value="value" @input="input" />
    ...
  </div>
<template>

Vue.component("my-input", {
   inheritAttrs: false,
   props: ['value'],
   methods: {
     input($event): void {
       this.$emit("input", $event.target.value)
     }
  }
})

用法：

<my-input v-model="myModel" />

这似乎工作得很好。模型通过输入事件处理程序发出目标元素值来更新。

但是，现在我尝试将此组件与一些现有代码一起使用：

<my-input v-model="myModel2" @input="something = $event.target.value" />

这就是我在活动中遇到麻烦的地方$emit("input")。我收到以下错误：

无法读取未定义的属性“值”

因此，我$emit正在发出该值，但现在现有的@input="something..."事件处理程序无法$event正确引用该值。

如果我更改组件的input方法来发出$event而不是$event.target.value，新代码似乎可以工作，但随后模型没有更新更新为InputEvent而不是实际值。

我不确定我需要做什么。

Answer 1

当您$emit('input')和该值绑定到v-model文本输入的 a 时，该值<input>将更新为您发出的任何值。在 的情况下，它是您发出的$emit('input', $event.target.value)中的文本值。<input>该值将在父级中被拦截，v-model实际上是这样：<my-input :value="inputValue" @input="inputValue = $event">

这意味着 > 的值<input将被绑定回<input>（实际上不会改变输入中的值）。但是，如果您$emit('input', $event), thenv-model仍将捕获传递的任何值并<input>用它更新 的值。在这种情况下，正如您所说，它将是实际的输入事件对象。

如果您不想使用input与模型绑定的事件，则始终可以使用自定义v-model事件。然后你就可以$emit('input', $event)不让它影响 v-model 值，而是从以下位置更新 v-model$emit('custom-event', $event.target.value)