Vue 3 JSX 中 v-model 需手动展开为 modelValue prop 和 onUpdate:modelValue 事件；支持自定义名如 title 对应 title prop 和 "onUpdate:title"；多 v-model 需分别传参和监听；原生 input 应用 onInput 而非 onChange。
在 Vue 3 的 JSX（或 TSX）中使用 v-model，不能像模板语法那样直接写 v-model="xxx"，因为 JSX 不支持指令式写法。它需要手动展开为等价的 prop + 事件绑定，核心是：传入 modelValue prop，并监听 onUpdate:modelValue 事件。
基础写法：单个 v-model 绑定
以自定义输入组件 CustomInput 为例：
- 父组件 JSX 中需显式传递
modelValue属性和onUpdate:modelValue处理函数 - 不能用
v-model字符串语法，必须拆解为对象属性 - 推荐使用解构方式保持简洁，例如
{...{ modelValue: inputValue, 'onUpdate:modelValue': e => setInputValue(e) }}
示例代码：
const App = {
setup() {
const inputValue = ref('')
const setInputValue = (val) => { inputValue.value = val }
return () => (
<div>
<custominput modelvalue="{inputValue.value}" onupdate:modelvalue="{(val)"> setInputValue(val)}
placeholder="请输入"
/>
<p>当前值：{inputValue.value}</p>
</custominput>
</div>
)
}
}
支持自定义名称的 v-model（如 v-model:title）
当子组件使用 v-model:title 时，JSX 中对应的是 title prop 和 onUpdate:title 事件：
- 父组件传
title={titleValue} - 监听
onUpdate:title并更新响应式数据 - 子组件 props 需声明
title，并 emitupdate:title
注意：事件名中的冒号在 JSX 属性中要加引号，如 "onUpdate:title"。
多 v-model 同时绑定
一个组件可同时支持多个 v-model，比如 v-model:firstName 和 v-model:lastName：
- JSX 中分别传
firstName、lastName两个 prop - 分别监听
"onUpdate:firstName"和"onUpdate:lastName" - 子组件需定义对应 props 并 emit 对应 update 事件
这样就能在 JSX 场景下实现和模板中一致的灵活性，且类型推导更清晰（尤其在 TSX 中）。
与原生 input 元素配合的注意事项
在 JSX 中给原生 使用 v-model 等价写法时，要注意事件类型：
- 文本类输入用
onInput（非onChange），否则无法实时响应 - checkbox/radio 应用
onUpdate:modelValue并基于checked属性控制状态 - 避免混用
value和modelValue—— 原生元素只认value，自定义组件才用modelValue
本质上，JSX 中没有魔法，只有明确的数据流向：你控制 prop 输入，你处理事件输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
