深入了解V-model实现数据双向绑定
深入了解V-model实现数据双向绑定
父组件实现双向绑定
在父组件中使用 v-model：
<ChildComponent v-model="message" />
等价于：
<ChildComponent :modelValue="message" @update:modelValue="val => message = val" />
:modelValue：通过props将message的值传递给子组件。@update:modelValue：通过emit向父组件发送更新值。
子组件实现双向绑定
为了支持父组件的 v-model，子组件需要：
- 定义
props，接收父组件传递的数据。 - 使用
emit发送更新事件。
<script setup>
import { defineProps, defineEmits } from 'vue';
// 接收父组件传递的 modelValue
defineProps({
modelValue: String, // 父组件传递的值
});
// 定义更新事件
defineEmits(['update:modelValue']);
const updateValue = (newValue) => {
// 触发事件，通知父组件更新数据
emit('update:modelValue', newValue);
};
</script>
<template>
<input :value="modelValue" @input="updateValue($event.target.value)" />
</template>
defineModel()
从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()宏
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>
父组件可以用 v-model 绑定一个值：
template
<!-- Parent.vue -->
<Child v-model="countModel" />
defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的
.value和父组件的v-model的值同步； - 当它被子组件变更了，会触发父组件绑定的值一起更新。
这意味着你也可以用 v-model 把这个 ref 绑定到一个原生 input 元素上，在提供相同的 v-model 用法的同时轻松包装原生 input 元素：
<script setup>
const model = defineModel()
</script>
<template>
<input v-model="model" />
</template>
底层机制
defineModel 是一个便利宏。编译器将其展开为以下内容：
- 一个名为
modelValue的 prop，本地 ref 的值与其同步； - 一个名为
update:modelValue的事件，当本地 ref 的值发生变更时触发。