defineModel 简化 Vue 的 v-model 的定义和维护

可以很方便的管理 v-model 双向绑定，无需再维护一个变量，并且可以方便的定义多个 v-model。

需要修改值时可以直接改无需再 emit 到父组件，defineModel 会自动派发事件，完全可以当作一个 ref 变量使用

官方文档 https://vuejs.org/api/sfc-script-setup.html#definemodel

使用示例

parent.vue

<template>
  <div>
    <Child v-model="value" v-model:number="number" />
    <p>{{ vlaue }}</p>
    <p>{{ number }}</p>
  </div>
</template>
<script lang="ts" setup>
const value = ref<string>('');
const number = ref<number>(0);
</script>

child.vue

<template>
  <input v-model="modelValue" type="text" />
  <input v-model.number="number" type="number" />
</template>
<script lang="ts" setup>
// 不传参数 props name 则默认为modelValue
const modelValue = defineModel<string>({ default: '' });

// 修改 props name 为 number，并且设置必需传参数
const number = defineModel<number>('number', { required: true });

onMounted(() => {
  // 可以直接去修改
  number.value = 123;
});
</script>