Vue3组件数据双向绑定
在Vue的组件中，我们可以使用props将父组件的数据传递给子组件，父组件中的数据发生变化后，子组件也会跟着改变，但是props是向下绑定的，就是说当子组件的数据发生变化时，父组件不会改变。
为了能够在子组件中修改父组件的数据，我们可以使用 v-model 对组件间的数据进行双向绑定，在父组件或子组件中进行数据修改时都会引起对方的数据变化。
下面介绍使用 v-model 进行数据双向绑定的使用。
基础用法
在使用数据双向绑定时，需要自定义一个组件：
<!-- 子组件 -->
<template>
<input v-model="value">
</template>
<script setup>
const value = defineModel()
</script>
<style lang='scss' scoped>
</style>在子组件中，使用 const value = defineModel() 声明双向数据绑定，defineModel() 返回的是一个ref，可以像其他ref一样访问或修改。
同时，需要一个父组件调用子组件，并传递双向绑定的数据。
<!-- 父组件 -->
<template>
<p>{{ value }}</p>
<Child v-model="value"></Child>
</template>
<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'
const value = ref('abcde')
</script>
<style lang='scss' scoped>
</style>在子组件上使用 v-model 将父组件的value与子组件双向绑定，子组件输入框修改时，父组件的value会一起改变。
v-model 的参数
组件上的 v-model 可以接收一个参数。同时，在子组件中，使用字符串传递给 defineModel() 以支持相应的参数。
<!-- 子组件 -->
<template>
<input v-model="value">
</template>
<script setup>
const value = defineModel('value')
</script>
<style lang='scss' scoped>
</style><!-- 父组件 -->
<template>
<p>{{ value }}</p>
<Child v-model:value="value"></Child>
</template>
<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'
const value = ref('abcde')
</script>
<style lang='scss' scoped>
</style>多个 v-model 绑定
在 v-model 的参数的基础上，我们可以单个组件实例上创建多个 v-model 双向绑定。
只需使用不同的参数便可以实现多个数据双向绑定。
<!-- 子组件 -->
<template>
<input v-model="value1">
<input v-model="value2">
</template>
<script setup>
const value1 = defineModel('value1')
const value2 = defineModel('value2')
</script>
<style lang='scss' scoped>
input {
display: block;
}
</style><!-- 父组件 -->
<template>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
<Child
v-model:value1="value1"
v-model:value2="value2"
></Child>
</template>
<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'
const value1 = ref('abcde')
const value2 = ref('sdvhj')
</script>
<style lang='scss' scoped>
</style>结果：
