Vue3：v-model实现组件通信
目录
一.性质
1.双向绑定
2.语法糖
3.响应式系统
4.灵活性
5.可配置性
6.多属性绑定
7.修饰符支持
8.defineModel使用
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
2.子组件代码
四.效果
一.性质
在Vue3中，v-model指令的性质和作用主要体现在其双向数据绑定能力。v-model是Vue.js中一个强大的工具，用于实现表单输入和应用状态之间的同步更新。
1.双向绑定
v-model实现了数据的双向绑定，即当视图中的数据改变时，模型中对应的数据也会更新；反之亦然。
2.语法糖
v-model实际上是:modelValue和@input事件的组合，这种组合简化了开发者的编码工作，使得代码更加简洁易读。
3.响应式系统
通过Vue的响应式系统，v-model能够监听用户输入的变化，并将这些变化反映到应用的状态中，从而实现动态的视图更新。
4.灵活性
v-model不仅限于原生的HTML表单元素，还可以应用于自定义组件，提供了更大的灵活性和可扩展性。
5.可配置性
在Vue3中，v-model的使用变得更加灵活，允许开发者自定义绑定的属性名称和事件，这为处理复杂场景提供了更多可能性。
6.多属性绑定
v-model支持在同一组件上绑定多个属性，这使得组件可以同时与多个数据属性保持同步。
7.修饰符支持
Vue3还引入了修饰符的概念，允许开发者根据需要自定义v-model的行为，例如使用.lazy、.number等修饰符来改变绑定的行为。
8.defineModel使用
从Vue 3.4开始，推荐使用defineModel宏来声明双向绑定的prop，这种方式更加直观且易于管理。
二.使用
1.父组件
2.子组件
将接收的value值赋给input元素的value属性，为了呈现数据
给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件
三.代码
1.父组件代码
<template>
<div class="father">
<h4>组件</h4>
<!-- 使用v-model指令 -->
<input type="text" v-model="name">
<!-- v-model的本质是下面这行代码 -->
<!-- <input
type="text"
:value="name"
@input="name =(<HTMLInputElement>$event.target).value"> -->
<!-- 组件标签上使用v-model指令 -->
<CustomInput v-model="name"/>
<!-- 组件标签上v-model的本质 -->
<!-- <CustomInput :modelValue="name" @update:model-value="name = $event"/> -->
</div>
</template>
<script setup lang="ts" name="father">
import { ref } from "vue";
import CustomInput from "../components/CustomInput.vue";
let name = ref('zhangsan')
</script>
<style>
.father{
background-color: skyblue;
}
h4{
margin-left: 20px;
font-size: 20px;
}
input{
width: 200px;
height: 40px;
font-size: 20px;
margin-left: 20px;
}
</style>
2.子组件代码
<template>
<!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
<input
type="text"
:value="modelValue"
@input="emit('update:model-value',(<HTMLInputElement>$event.target).value)"
>
</template>
<script setup lang="ts" name="CustomInput">
// 接收props
defineProps(['modelValue'])
// 声明事件
const emit = defineEmits(['update:model-value'])
</script>
<style scoped>
input{
border-width: 2px;
border-color: orange;
width: 200;
height: 40;
}
</style>
四.效果
