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 的优缺点

优点

1. 极简写法 —— 不用再写 props + emit。

2. 语义清晰 —— 一眼就能看出这是 v-model 绑定的值。

3. 支持多 v-model —— 写起来比原生的 props + emit 更直观。

缺点

1. 只在 Vue3.3+ 可用，老版本不支持。

2. 对于复杂的业务逻辑，可能还是需要 props + emit 来处理更灵活的场景。

六、适用场景

• 表单类组件（输入框、选择器、弹窗开关等）。

• 需要多个 v-model 的复杂组件（如富文本编辑器：v-model:value、v-model:config）。

• 需要简化组件写法的场景。

七、总结

defineModel 是 Vue3.3 之后提供的一个语法糖，它让我们在子组件中使用 v-model 更加简洁高效：

• 不需要再写 props 和 emit。

• 可以直接定义一个响应式变量和父组件双向绑定。

• 支持类型、默认值、多 v-model。

如果你项目的 Vue 版本在 3.3 以上，强烈推荐用起来！