vue3中使用v-model透传ref实现子组件与父组件数据同步

在使用defineModel透传的时候要注意两点

1. 父组件传入的ref值不能为null或者undefined
2. 子组件需要一个默认值
3. 如果为 defineModel prop 设置了一个 default 值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。
4. v-model的透传可以穿过多个组件，多个组件之间共同响应。
   举个例子

<script setup lang="ts">
import { ref } from 'vue';
import First from './First.vue';

const data = ref()
</script>

<template>
  <div>
    <div>第一层：{{ data }}</div>
    <el-input v-model="data" />
  </div>
  <First v-model="data" />
</template>

<script setup lang="ts">
import Second from './Second.vue';

const data = defineModel()
</script>

<template>
  <div>第二层：{{ data }}</div>
  <Second v-model="data" />
</template>

<script setup lang="ts">
import Second from './Second.vue';
import Third from './Third.vue';

const data = defineModel()
</script>

<template>
  <div>第三层：{{ data }}</div>
  <el-input v-model="data" />
  <Third v-model="data" />
</template>

在这里修改第三层的值，所有组件的data都会改变。绑定多个v-model同样可以多层响应