如何基于用户输入修改组件defineModel绑定的父级模型值？

方案一：通过监听输入值同步转换后的值 #

适合需要输入框保留用户原始输入，但父级接收转换后内容的场景。

import { defineModel, ref, watch } from 'vue';

// 声明父级绑定的model
const model = defineModel({
  type: String,
});

// 绑定输入框的本地ref，初始化同步父级初始值
const inputModel = ref(model.value);

// 监听输入框内容变化，转小写后同步到model
watch(inputModel, (newInput) => {
  model.value = newInput.toLowerCase();
});

// 监听父级model的主动修改，同步回输入框
watch(model, (newModelVal) => {
  inputModel.value = newModelVal;
});

模板部分：

<input v-model="inputModel" />

方案二：直接在输入事件中处理转换 #

适合输入框也需要显示转换后内容的场景（用户输入大写时自动转为小写显示）。

import { defineModel } from 'vue';

const model = defineModel({
  type: String,
});

const handleInput = (e) => {
  const lowerCaseVal = e.target.value.toLowerCase();
  // 同步转换后的值到父级model
  model.value = lowerCaseVal;
  // 更新输入框显示内容为转换后的值
  e.target.value = lowerCaseVal;
};

模板部分：

<input :value="model.value" @input="handleInput" />

补充说明 #

• 使用defineModel时，model.value直接对应父级的绑定值，修改它会自动同步到父组件。
• 方案一的双向监听确保了父级主动修改model时，输入框内容也能同步更新；方案二则更直接，在输入阶段就完成转换。

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