目录
一.性质
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">// 接收propsdefineProps(['modelValue'])// 声明事件const emit = defineEmits(['update:model-value'])</script><style scoped>
input{border-width: 2px;border-color: orange;width: 200;height: 40;}</style>四.效果
