defineModel 声明一个双向绑定 prop，通过父组件的 v-model 来使用 VUE3文档地址

1. 简化双向绑定写法

• 父组件

<template>
  <div class="about">
    <button @click="updateData">父组件 修改</button>
    父组件展示 'age': {{ age }}

    <defineModelChild v-model:age="age" />
  </div>
</template>

<script setup lang="ts">
import defineModelChild from '../components/defineModel-child.vue'
import { ref } from 'vue'
const age = ref(10)

function updateData() {
  age.value++
}
</script>

• 子组件

<script setup lang="ts">
const age = defineModel('age', { type: Number, default: 0 })
function childUpdateData() {
  age.value += 10
}
</script>

<template>
  <div class="greetings">'age' : {{ age }}</div>
  <button @click="childUpdateData">子组件修改数据</button>
</template>

备注：

<defineModelChild v-model:age="age" v-model:name="name" ... /> 可以写多了

2. 自定义修饰符

• 父组件

 <defineModelChild v-model:age.doubleNumber="age" />

这里的 doubleNumber（翻倍） 就是 自定义修饰符

• 子组件

<script setup lang="ts">
const [age, ageModifier] = defineModel('age', {
  type: Number,
  default: 0,
  // get(val: number) {
  // 读取出来的数据，可以通过doubleNumber 来 翻倍
  //   console.info('3', val)
  //   return val
  // },
  set(val: number) {
    console.info(1233, val)
    if (ageModifier.doubleNumber) {
      return val * 2
    }
    return val
  },
})
console.info(123123, ageModifier)

function childUpdateData() {
  age.value += 10
}
</script>

<template>
  <div class="greetings">子组件 显示 'age' : {{ age }}</div>
  <button @click="childUpdateData">子组件修改数据</button>
</template>

当childUpdateData执行会调用 set 然后 触发 doubleNumber 的判断