Vue3 defineModel 怎么一行代码搞定 v-model 双向绑定？(3.4+)

Question

仓乃文 · Accepted Answer

Vue 3.4 之前实现 v-model 需要手动定义 props 和 emit，代码冗余。defineModel 将 props 声明和 emit 触发合并为一个 ref，修改 ref 的值自动通知父组件，大幅简化双向绑定代码。传统写法 vs defineModel： ```javascript // 传统写法：需要 props + emit const props = defineProps(["modelValue"]); const emit = defineEmits(["update:modelValue"]); const updateValue = (e) => emit("update:modelValue", e.target.value); // defineModel 写法：一行搞定 const modelValue = defineModel(); ``` 模板中直接用 v-model： ```html ``` 带默认值和类型： ```javascript const count = defineModel({ default: 0 }); const text = defineModel("title", { default: "" }); ``` 补充说明： - defineModel 返回的是 ref，修改 .value 自动触发 update:xxx 事件 - 第一个参数是 prop 名称（默认 modelValue），第二个参数是选项 - 支持 validator 验证和 set/get 转换器 - Vue 3.4+ 可用，3.5+ 稳定，旧版本需用 props + emit 手动实现 - 非SFC组件可用 useModel(props, key) 替代