Vue3.4.8组件v-model初始未更新父组件及相关报错问题

问题1：初始值未应用capitalize修饰符，父组件显示原始小写值 #

原因 #

defineModel 的 get 方法仅负责将父组件的值转换后供子组件使用（比如让输入框显示大写），但不会主动修改父组件的原始响应式变量。父组件的 color 初始值为 'red'，未经过修饰符处理，因此模板渲染时仍显示原始小写值。

解决方案 #

方案1：父组件初始化时直接处理值

初始化 color 时就应用首字母大写逻辑，从根源保证值符合预期：

// 父组件 script setup
import { ref } from 'vue';
import TextInput from './TextInput.vue';

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
const size = ref(1);
const color = ref(capitalize('red'));

方案2：子组件挂载后主动同步处理后的值

在子组件中通过 onMounted 钩子，将处理后的值回传给父组件，实现初始值同步：

<!-- 子组件 TextInput.vue -->
<script setup>
import { ref, onMounted } from 'vue';

const size = defineModel('size');

const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
const [color, modifier] = defineModel('color', {
  set(value) {
    return modifier.capitalize ? capitalize(value) : value;
  },
  get(value) {
    return modifier.capitalize ? capitalize(value) : value;
  }
});

onMounted(() => {
  // 初始化时将处理后的值同步给父组件
  color.value = capitalize(color.value);
});
</script>

<template>
  <input v-model="size">
  <input v-model="color">
</template>

问题2：省略defineModel的name参数导致警告与更新失效 #

原因 #

• defineModel('color') 中的 'color' 是指定双向绑定对应的prop名称，必须与父组件 v-model:color 的后缀一致。若省略该参数，defineModel 默认使用 modelValue 作为prop名称，父组件传入的 color 会被判定为非props属性，触发警告。
• 若仅保留color对应的input，此时子组件的defineModel默认绑定modelValue，与父组件的v-model:color不匹配，输入时无法触发父组件值更新，导致组件同步失效。

解决方案 #

必须显式指定 defineModel 的第一个参数为 'color'，确保与父组件的绑定名称完全匹配：

const [color, modifier] = defineModel('color', { /* 配置项 */ });

这样Vue能正确识别双向绑定的prop，消除警告并保证值的正常同步。

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