Vue SFC自定义v-model核心是规范数据流入与变化流出：Vue 2用value prop+input事件；Vue 3.3+推荐defineModel()宏；基础写法用modelValue+update:modelValue；支持多v-model及自定义字段名。
Vue 单文件组件（SFC）实现自定义 v-model，核心是让父组件传值进来有明确入口、子组件改值后有标准出口。不同 Vue 版本写法略有差异，但逻辑一致：**数据怎么进、变化怎么出**。
Vue 2：用 value prop + input 事件
这是最经典的方式，v-model 默认就是 :value 和 @input 的语法糖。
- 子组件
props中声明value（类型按需，如String、Number、Array） - 不直接修改
props.value，可用data或computed+setter做中间层 - 在用户交互时（如
@input、@change），调用this.$emit('input', newValue)
例如一个封装的输入框：
<script><br>export default {<br> props: { value: { type: String, default: '' } }<br>}<br></script>
Vue 3（3.3+）：推荐 defineModel() 宏
这是目前最简洁、最语义化的写法，底层自动处理了 modelValue prop 和 update:modelValue 事件。
- 无需手动声明
props或emits - 调用
const model = defineModel()，得到一个响应式 ref - 可直接绑定到原生元素：
示例：
<script setup><br>const model = defineModel()<br></script>
Vue 3（基础写法）：modelValue + update:modelValue
适用于需要显式控制逻辑，或兼容较早版本（3.0–3.2）的场景。
-
props接收modelValue - 用
defineEmits(['update:modelValue'])声明事件 - 通过
computed双向代理，或在方法中手动emit
常见模式：
<script setup><br>const props = defineProps(['modelValue'])<br>const emit = defineEmits(['update:modelValue'])<br>const proxy = computed({<br> get() { return props.modelValue },<br> set(val) { emit('update:modelValue', val) }<br>})<br></script>进阶：多 v-model 或自定义字段名
当组件需要绑定多个状态，或想换掉默认字段名时，可以这样用：
- 父组件：
- 子组件中分别用
defineModel('name')和defineModel('email') - 或 Vue 2 中通过
model: { prop: 'checked', event: 'change' }配置绑定规则
比如开关组件想用 checked 而非 value，就可在 Vue 2 组件选项里加 model 配置，让 v-model 自动监听 change 事件并更新 checked prop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
