htmledit_views">

目录

一.性质

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 "html" title=vue>vue";import CustomInput from "../components/CustomInput.html" title=vue>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>

四.效果