目录

一.性质

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>

四.效果