Vue3 emit原始值未触发父组件@input事件问题咨询

你遇到的回调触发差异和emit参数是整数还是事件对象没有关联，本质是Vue3的事件透传规则和你的事件触发逻辑不一致导致的：

• 原生<input>元素自带原生DOMinput事件，若你的form-input组件未在emits声明中显式定义input为自定义事件、且未禁用根元素透传，原生input事件会自动透传到父组件，因此父组件绑定的@input能收到回调。你手动emit的update:modelValue仅用于适配Vue3默认v-model，和父组件收到的input事件无关。
• vue-multiselect是自定义组件，本身不会触发原生input事件，你仅在它的update:model-value回调中emit了update:modelValue事件，没有触发input事件，父组件自然收不到对应回调。

你现在临时同时触发两个事件的思路是对的，只需要做一层简单封装就能简化代码，避免每个控件都写重复的emit逻辑：

1. 先在组件的emits声明中同时注册两个事件：

// 选项式API写法
export default {
  emits: ['update:modelValue', 'input'],
  // 其他配置
}

// setup语法糖写法
const emit = defineEmits(['update:modelValue', 'input'])

2. 封装统一的值变更触发函数：

const handleValueUpdate = (newVal) => {
  emit('update:modelValue', newVal)
  emit('input', newVal)
}

3. 替换模板中所有控件的事件回调：

<input 
  v-if="['text', 'number', 'tel', 'email'].includes(resolveType)"
  v-model="localValue"
  @input="handleValueUpdate($event.target.value)"
/>

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

如果你的项目已经全量适配Vue3的v-model规范，没有历史代码依赖@input自定义事件，也可以直接把父组件的@input监听改为@update:modelValue，不需要做兼容处理。

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