完整教程：vue3 defineModel应用

Vue 3 defineModel 应用指南

defineModel 是 Vue 3.3+ 引入的一个新的编译器宏，用于简化组件的双向绑定（v-model）实现。

基本用法

defineModel 主要用于简化自定义组件中 v-model 的实现：

// 声明一个名为 modelValue 的 model
const model = defineModel()
// 或者指定不同的 prop 名
const title = defineModel('title')

与传统写法的对比

传统写法：

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

使用 defineModel 后：

const modelValue = defineModel()

支持多个 v-model

const firstName = defineModel('firstName')
const lastName = defineModel('lastName')

使用时：

类型定义和默认值

const model = defineModel({
type: String,
default: 'default value'
})
// 或者使用 TypeScript
const model = defineModel('title', { default: 'default title' })

修饰符处理

defineModel 可以接收修饰符：

const [model, modifiers] = defineModel({
set(value) {
if (modifiers.capitalize && typeof value === 'string') {
return value.charAt(0).toUpperCase() + value.slice(1)
}
return value
}
})

使用时：

注意事项

1. defineModel 是编译时宏，不需要显式导入

2. 需要 Vue 3.3 或更高版本

3. 底层仍然是基于 props 和 emit 实现的语法糖

4. 对于复杂逻辑，仍然可以使用传统的 props + emit 方式

defineModel 大大简化了自定义组件中双向绑定的实现，使代码更加简洁易读。