v-model 在自定义组件中需显式实现“接收 prop + 触发 update:xxx 事件”，vue 3 默认用 modelvalue 和 update:modelvalue，支持多 v-model、自定义绑定名及修饰符处理，严禁直接修改 props。
v-model 在自定义组件中不是自动生效的魔法，而是明确的约定：组件必须接收特定 prop，并在值变化时触发对应事件，父组件才能同步更新。核心就是“接收 + 通知”两个动作。
Vue 3 的标准写法：modelValue + update:modelValue
Vue 3 废除了 Vue 2 的 value/input 组合，默认使用 modelValue 作为 prop 名，update:modelValue 作为更新事件名。
- 在组件中用
defineProps({ modelValue: [String, Number, Boolean] })声明接收值 - 用
defineEmits(['update:modelValue'])声明可触发的事件 - 模板中绑定原生输入框：
<input :modelvalue="modelValue"> - 父组件直接写
<myinput v-model="userName"></myinput>即可，等价于<myinput :modelvalue="userName"></myinput>
支持多个 v-model 或自定义绑定名
一个组件可以同时绑定多个字段，比如标题和内容；也可以把 v-model 映射到其他 prop 名，如 v-model:title。
- 用
v-model:title="post.title"时，组件需声明titleprop 并监听update:title事件 - Vue 3.4+ 推荐用
const title = defineModel('title')，模板中直接v-model="title"，无需手动 emit - 修饰符（如
.number、.trim）需在组件内判断modelModifiers对象并做相应处理
Vue 2 的兼容写法：value + input
Vue 2 中 v-model 默认寻找 value prop 和 input 事件。若需修改默认行为，可通过 model 选项自定义。
- 基础写法：props 定义
value，输入时this.$emit('input', newValue) - 自定义绑定：在组件选项中添加
model: { prop: 'checked', event: 'change' }，之后v-model就会作用于checkedprop 并监听change事件 - 适用于 checkbox、radio 等非文本输入类组件，让 v-model 语义更贴切
关键注意事项
无论 Vue 版本，有几条原则不能违背：
- 不要直接修改 props（如
this.value = xxx），这会触发 Vue 警告，且破坏单向数据流 - 原生表单元素内部不要用
v-model，否则会与外部 v-model 冲突；统一用:value+ 事件触发 - 事件名必须与 prop 名严格匹配（如
modelValue→update:modelValue），大小写、冒号都不能错 - 如果组件需要初始化值或校验逻辑，应在
watch或onMounted中处理，而非在 prop 初始化时改写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
