Vue输入包装组件v-model与@input事件冲突问题咨询

这确实是Vue组件封装时很常见的一个痛点，我来给你几个实用的解决方案：

方案1：自定义原生事件名称（最直观） #

既然组件的input事件已经被v-model占用用来传递值，那我们可以给原生input事件单独emit一个自定义事件，让外部需要原生事件的场景使用这个事件：

修改组件代码：

<template>
  <div>
    <input v-bind="$attrs" :value="value" @input="handleInput" />
    ...
  </div>
</template>
<script>
Vue.component("my-input", {
  inheritAttrs: false,
  props: ['value'],
  methods: {
    handleInput($event) {
      // 给v-model传递输入值
      this.$emit("input", $event.target.value)
      // 额外emit一个带原生事件的自定义事件
      this.$emit("native-input", $event)
    }
  }
})
</script>

外部使用时，改用自定义的事件名来获取原生事件：

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

方案2：利用$listeners自动传递原生事件（最优雅） #

Vue提供了$listeners属性，它包含了父组件传递的所有事件监听器，我们可以把它直接绑定到原生input上，这样外部的@input会直接监听原生input的事件，而组件自己维护v-model的逻辑：

修改组件代码：

<template>
  <div>
    <!-- 用v-on="$listeners"把外部事件绑定到原生input -->
    <input v-bind="$attrs" :value="value" @input="handleInput" v-on="$listeners" />
    ...
  </div>
</template>
<script>
Vue.component("my-input", {
  inheritAttrs: false,
  props: ['value'],
  methods: {
    handleInput($event) {
      // 只负责给v-model传递输入值
      this.$emit("input", $event.target.value)
    }
  }
})
</script>

这样外部可以直接用原来的写法，不需要修改事件名：

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

原理是：外部的@input通过v-on="$listeners"直接绑定到了原生input元素，所以触发的是原生InputEvent，能正常拿到$event.target.value；而v-model监听的是组件自己emit的input事件，拿到的是处理后的输入值，两者互不干扰。

为什么原来的写法会报错？ #

你之前的问题根源在于：Vue的v-model本质是语法糖，等价于:value="myModel2" @input="myModel2 = $event"。你的组件里$emit("input", $event.target.value)传递的是字符串值，所以外部额外加的@input="something = $event.target.value"里的$event就是这个字符串，自然没有target属性，导致报错。

内容的提问来源于stack exchange，提问作者jeffjenx