blog-press/docs/Web/Vue/Vue3-DefineModel.md

title, date

title	date
Vue3 defineModel	2026-06-05

一、概念

  defineModel是对 props + emit的语法糖，返回一个可写的 ref。Vu3.4开始支持。
  之前的做法：

// 子组件
const props = defineProps({
  modelValue: Number
})

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

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

  现在做法：

const model = defineModel()

二、简单示例

  父组件：

<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>

  子组件：

<script setup>
const model = defineModel({
  type: Number,
  default: 1
})
</script>

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

  和defineProps定义类似，可以指定类型和默认值。

三、多个v-model

  父组件：

<UserForm
  v-model:name="form.name"
  v-model:age="form.age"
/>

  子组件：

<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: 可写 :::