一文带你深入了解V-model实现数据双向绑定
作者：带钱跑路77
这篇文章主要为大家详细介绍了V-model实现数据双向绑定的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
父组件实现双向绑定
在父组件中使用 v-model：
<ChildComponent v-model="message" />
等价于：
<ChildComponent :modelValue="message" @update:modelValue="val => message = val" />
:modelValue：通过 props 将 message 的值传递给子组件。
@update:modelValue：通过 emit 向父组件发送更新值。
子组件实现双向绑定
为了支持父组件的 v-model，子组件需要：
1.定义 props，接收父组件传递的数据。
2.使用 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 的值发生变更时触发。
到此这篇关于一文带你深入了解V-model实现数据双向绑定的文章就介绍到这了,更多相关V-model数据双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！