Vue3 新特性 defineModel 全面解析：让 v-model 写法更优雅
目录
一、前言
二、回顾传统 v-model 用法
三、defineModel 的出现
四、defineModel 的进阶用法
1. 指定类型
2. 自定义 prop 名称
3. 添加默认值和校验规则
五、defineModel 的优缺点
优点
缺点
六、适用场景
七、总结
一、前言
在 Vue3.3 版本中，官方新增了一个非常实用的语法糖 —— defineModel。它的主要作用是让我们在组件中更方便地使用 v-model，简化了以往繁琐的写法。
如果你之前写过 Vue2 或 Vue3 的组件，应该对 props + emit 结合 v-model 的写法很熟悉。但这种写法相对麻烦，而 defineModel 正是为了解决这个问题而生的。
二、回顾传统 v-model 用法
在 Vue3 中，父子组件传递双向绑定一般是这样写的：
子组件（传统写法）
<script setup>
import { defineProps, defineEmits } from 'vue'const props = defineProps({modelValue: String
})
const emit = defineEmits(['update:modelValue'])function onInput(e) {emit('update:modelValue', e.target.value)
}
</script><template><input :value="props.modelValue" @input="onInput" />
</template>
父组件
<script setup>
import ChildInput from './ChildInput.vue'
import { ref } from 'vue'const text = ref('')
</script><template><ChildInput v-model="text" /><p>父组件里的值：{{ text }}</p>
</template>
可以看到：
-
子组件需要写
props和emit，再手动触发update:modelValue。 -
写起来比较繁琐，不够直观。
三、defineModel 的出现
Vue3.3 引入的 defineModel 大大简化了这个流程。它让子组件可以直接声明一个 响应式变量，这个变量就自动和 v-model 绑定。
子组件（使用 defineModel）
<script setup>
const modelValue = defineModel()
</script><template><input v-model="modelValue" />
</template>
是不是简单很多？
-
不再需要
defineProps、defineEmits。 -
直接用一个变量就能完成父子双向绑定。
四、defineModel 的进阶用法
1. 指定类型
<script setup lang="ts">
const modelValue = defineModel<string>()
</script>
这样在 TS 下会有更好的类型提示。
2. 自定义 prop 名称
默认情况下，defineModel() 对应的就是 v-model（即 modelValue）。
但如果你想用多个 v-model，也可以给它起名字：
<script setup>
const title = defineModel('title')
const content = defineModel('content')
</script><template><input v-model="title" placeholder="标题"/><textarea v-model="content" placeholder="内容"></textarea>
</template>
父组件这样用：
<ArticleEditor v-model:title="postTitle" v-model:content="postContent" />
3. 添加默认值和校验规则
defineModel 也支持和 defineProps 类似的配置：
<script setup>
const modelValue = defineModel({type: String,default: 'Hello Vue3',required: true
})
</script>
这样可以确保绑定的值有默认值，也能做一些简单的类型校验。
五、defineModel 的优缺点
优点
-
极简写法 —— 不用再写
props+emit。 -
语义清晰 —— 一眼就能看出这是
v-model绑定的值。 -
支持多
v-model—— 写起来比原生的props + emit更直观。
缺点
-
只在 Vue3.3+ 可用，老版本不支持。
-
对于复杂的业务逻辑，可能还是需要
props+emit来处理更灵活的场景。
六、适用场景
-
表单类组件（输入框、选择器、弹窗开关等）。
-
需要多个
v-model的复杂组件（如富文本编辑器：v-model:value、v-model:config）。 -
需要简化组件写法的场景。
七、总结
defineModel 是 Vue3.3 之后提供的一个语法糖，它让我们在子组件中使用 v-model 更加简洁高效：
-
不需要再写
props和emit。 -
可以直接定义一个响应式变量和父组件双向绑定。
-
支持类型、默认值、多
v-model。
如果你项目的 Vue 版本在 3.3 以上，强烈推荐用起来！