Vue3自定义Input组件v-model双向绑定无响应如何排查

Vue 3 中v-model的默认语法糖规则是固定的：父组件写v-model="xxx"时，会自动做两件事：

• 向子组件传递名为modelValue的prop，值为绑定的变量
• 给子组件绑定update:modelValue事件监听，触发时会把传入的新值同步给绑定的变量

你的子组件在输入时触发的事件名是customChange:modelValue，和v-model默认监听的update:modelValue不匹配，父组件收不到更新通知，绑定的变量不会被修改，自然没有响应式效果。
你的父组件代码逻辑没有问题：reactive配合toRefs返回的响应式变量可以正常支持v-model更新，故障完全出在子组件的事件名配置错误上。

直接修改子组件input标签的@input事件触发的事件名即可，把自定义的customChange:modelValue替换为标准的update:modelValue，修改后对应代码如下：

<template>
  <div class="input-wrapper">
    <label for="base-input">{{ label }}</label>
    <input
      class="input"
      :placeholder="placeholder"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      v-bind="$attrs"
      id="base-input"
    />
  </div>
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    label: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    modelValue: {
      type: [String, Number],
      default: "",
      required: true,
    },
  },
};
</script>

如果需要使用自定义事件名而非默认的update:modelValue，父组件不能使用v-model简写，需要手动完成prop绑定和事件监听，或者使用带参数的v-model写法。开发通用基础组件时，直接遵循Vue默认的v-model约定即可，不需要额外自定义事件名，能降低组件使用成本。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo