Vue3双向数据绑定v-model
目录
1 v-model简介
2 v-model原理
2.1 核心原理
2.2 修饰符
3 v-model快速上手
3.1 v-model绑定原生表单
3.2 v-model组件数据传递
3.2.1 父子组件通信
3.2.2 v-model实现父子组件数据传递原理
3.2.3 更便捷的v-model绑定方法
3.2.4 总结
1 v-model简介
v-model 是Vue框架的一种内置的API指令，用于处理双向数据绑定，本质是一种语法糖写法。
双向数据绑定是指数据绑定在视图上，视图的改变会影响绑定的数据，而数据的改变又会影响视图的显示。因此常用于表单项，表单元素通过v-model绑定数据，数据变化会影响表单元素的数据显示，而表单内的输入数据又会影响绑定的数据。
<script setup>const message = ref(null)
</script>
<template><input v-model="message" placeholder="输入内容" /><p>{{ message }}</p>
</template>
2 v-model原理
2.1 核心原理
上述v-model实际上会被编译器拆解为两个操作：
1.:value的value属性动态绑定。
2.@input输入事件。
即，当input输入框的value发生变化时，事件监听器会执行@input事件绑定的函数，将value的最新值复制到绑定的数据（这里就是message）：
<input :value="message" @input="message = $event.target.value"
>2.2 修饰符
.lazy：将input事件转为change事件（失焦后更新）
.number：输入值转为数字类型
.trim：自动去除首尾空格
可以为表单项的v-model添加修饰符，从而形成更多的绑定行为。比如使用.lazy和.trim组合，表单元素发生change事件才会进行数据同步，同时自动去除输入框的首尾空格：
<input v-model.lazy.trim="text"> 3 v-model快速上手
3.1 v-model绑定原生表单
除了可以绑定input表单项，还可以绑定如下表单项：
（1）多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>注意，在textarea使用插值表达式是无效的。比如下面的行为是错误的：
<textarea>{{ text }}</textarea>
（2）复选框
单选：
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>const checked = ref(false)
多选：
<div>Checked names: {{ checkedNames }}</div><inputtype="checkbox"id="jack"value="Jack"v-model="checkedNames"/><label for="jack">Jack</label><inputtype="checkbox"id="john"value="John"v-model="checkedNames"/><label for="john">John</label><inputtype="checkbox"id="mike"value="Mike"v-model="checkedNames"/><label for="mike">Mike</label>const checkedNames = ref([])
（3）选项框
<div>Selected: {{ selected }}</div><select v-model="selected"><option disabled value="">Please select one</option><option>A</option><option>B</option><option>C</option></select>const selected = ref('')建议在增加option，属性为disabled和value，即提供一个值为空的禁用选项，该选项会在selected还未有值的时候提供更友好的显示。
3.2 v-model组件数据传递
v-model更常用的用法是父子组件之间的数据传递，在此之前，先来看看常用的两种父子组件的通信方式：父传子（值传递）和子传父（事件传递）。
3.2.1 父子组件通信
（1）父传子
父传子又称为数据下行，父组件通过自定义属性向子组件传递数据，子组件通过props接收：
<!-- 父组件 -->
<ChildComponent :title="parentTitle" /><!-- 子组件 -->
<script setup>
defineProps(['title']) // 接收父组件传递的 title
</script>这种方式是单向数据流，即子组件不可直接修改title数据。
（2）子传父
子传父又称为事件上行，子组件通过$emit触发事件，父组件监听事件并更新数据：
<!-- 子组件 -->
<button @click="$emit('updateTitle', 'New Title')">修改标题</button><!-- 父组件 -->
<ChildComponent @updateTitle="parentTitle = $event" />3.2.2 v-model实现父子组件数据传递原理
而v-model实现父子组件数据传递的原理正是父子组件通信的两种方式的结合：
<!-- 父组件 -->
<ChildComponent :modelValue="data" @update:modelValue="data = $event"
/><!-- 等价于 -->
<ChildComponent v-model="data" />即，在父组件中使用子组件，通过v-model绑定data数据，底层会被解析为:modelValue的动态值绑定和@update事件函数。
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)" />
</template>即，在子组件中，通过props接收父组件的modelValue数据，通过emits来监听modelValue的数据修改事件，一旦子组件的modelValue发生变化，就会通过update事件通知父组件修改数据值。
注意：如果不使用v-model进行父子组件的双向数据绑定，仅想父组件传递数据给子组件，在父组件中使用:value="value"来绑定子组件的数据，子组件使用defineProps来接收该数据。
如果子组件通过事件通知父组件，父组件使用@事件="事件函数"绑定子组件，子组件使用defineEmits接收需要监听的事件即可。
3.2.3 更便捷的v-model绑定方法
在Vue 3.4以后，如下方式子组件可以更便捷的获取到父组件的双向数据绑定：
<script setup>
const modelValue = defineModel() // 自动关联 Prop 和事件
</script><template><input v-model="modelValue" />
</template>3.2.4 总结
v-model支持父子组件的响应式数据和视图的双向绑定，父组件通过modelValue porps数组将响应式数据传递给子组件，子组件视图变化通过@update:modelValue事件将修改后的值传给父组件。数据变了通过动态绑定值影响视图，视图变了通过事件监听影响数据。