---
  title: Vue3 defineModel
  date: 2026-06-05
---

# 一、概念
  defineModel是对 props + emit的语法糖，返回一个可写的 ref。Vu3.4开始支持。   
  之前的做法：  
```ts
// 子组件
const props = defineProps({
  modelValue: Number
})

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

function increment() {
  emit('update:modelValue', props.modelValue + 1)
}
```

  现在做法：  
```ts
const model = defineModel()
```

# 二、简单示例
  父组件：  
```vue
<script setup>
import Stepper from './Stepper.vue'
import { ref } from 'vue'

const quantity = ref(1)
</script>

<template>
  <div>
    <p>购买数量：{{ quantity }}</p>
    <Stepper v-model="quantity" />
  </div>
</template>
```

&emsp;&emsp;子组件：     
```vue
<script setup>
const model = defineModel({
  type: Number,
  default: 1
})
</script>

<template>
  <button @click="quantity--">−</button>
  <span>{{ quantity }}</span>
  <button @click="quantity++">+</button>
</template>
```

&emsp;&emsp;和`defineProps`定义类似，可以指定类型和默认值。   

# 三、多个v-model
&emsp;&emsp;父组件：  
```vue
<UserForm
  v-model:name="form.name"
  v-model:age="form.age"
/>
```

&emsp;&emsp;子组件：  
```vue
<script setup lang="ts">
const name = defineModel<string>('name', {
  default: ''
})

const age = defineModel<number>('age', {
  default: 0
})
</script>

<template>
  <input v-model="name" placeholder="姓名" />
  <input v-model="age" type="number" placeholder="年龄" />
</template>
```

::: tip
defineProps: 只读，不能改   
defineModel: 可写
:::