Vue3 Composition API自定义Input组件v-model绑定值不更新问题

问题产生原因 #

• Vue3 自定义组件的v-model默认约定与Vue2不同：绑定的prop为modelValue，但需要触发update:modelValue事件才能更新父组件绑定的值，你的代码中子组件触发的是input事件，父组件的v-model无法监听该事件，因此绑定值始终停留在初始的空字符串。
• 子组件setup的props类型定义错误：你给props标注的类型是{ value: string }，与实际定义的props属性不匹配，属于TypeScript语法错误，虽然不直接影响运行，但会导致类型校验失效。
• 父组件调用存在逻辑冗余问题：你将同一个name响应式变量同时绑定给了Input组件的name属性和v-model，导致input原生的name属性会随着输入内容变化，不符合表单属性的使用规范。

修复方案 #

第一步：修正子组件事件触发逻辑与类型定义 #

修改子组件的setup部分代码，将触发事件改为update:modelValue，同时修正props类型：

<script lang="ts">
import { computed } from 'vue';
// 定义props的类型接口
interface InputProps {
  modelValue: string;
  name: string;
  type?: string;
  placeholder: string;
}

export default {
  name: 'Input',
  props: {
    modelValue: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: 'text',
    },
    placeholder: {
      type: String,
      required: true,
    },
  },
  // 修正props类型
  setup(props: InputProps, { emit }) {
    const modelValue = computed({
      get() {
        return props.modelValue;
      },
      set(value) {
        // 触发Vue3 v-model约定的更新事件
        emit('update:modelValue', value);
      },
    });

    return { modelValue };
  },
};
</script>

第二步：修正父组件调用逻辑 #

如果Input组件的name属性需要固定为name，直接写静态值即可，不需要绑定响应式变量：

<form @submit.prevent="handleSubmit">
     <!-- 把:name="name"改为静态值name="name"，避免和v-model绑定的变量冲突 -->
     <Input name="name" placeholder="Name*" v-model="name" />
     <Button>Send</Button>
</form>

修改完成后，v-model就可以正常同步输入值了。

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