一文带你深入了解V-model实现数据双向绑定

更新时间：2024年12月20日 10:38:14 作者：带钱跑路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数据双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 动态给每个页面添加title、关键词和描述的方法
这篇文章主要介绍了vue 动态给每个页面添加title、关键词和描述的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-08-08
vue2.5.2使用http请求获取静态json数据的实例代码
这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下
2018-02-02
Vue动态生成表格的行和列
这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
vue3如何加载本地图片等静态资源浅析
在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,下面这篇文章主要给大家介绍了关于vue3如何加载本地图片等静态资源的相关资料,需要的朋友可以参考下
2023-04-04
vue中注册自定义的全局js方法
这篇文章主要介绍了vue中注册自定义的全局js方法,文中给大家补充介绍了vue自定义函数挂到全局的方法，需要的朋友可以参考下
2019-11-11
Vue判断数组内是否存在某一项的两种方法
这篇文章主要介绍了Vue判断数组内是否存在某一项,今天给大家分享两种方法，分别是findIndex()和 indexOf()方法，本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-07-07
VUE安装依赖时报错:npm ERR! code ERESOLVE的解决
在使用npm安装项目依赖时,有时会遇到错误信息 “npm ERR! code ERESOLVE”,本文就来介绍一下VUE安装依赖时报错的解决,具有一定的参考价值,感兴趣的可以了解一下
2023-10-10
基于Electron24+Vite4+Vue3搭建桌面端应用实战教程
这篇文章主要介绍了基于Electron24+Vite4+Vue3搭建桌面端应用,这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序，需要的朋友可以参考下
2023-05-05
vue代理模式解决跨域详解
这篇文章主要介绍了vue代理模式解决跨域详解的相关资料,需要的朋友可以参考下
2022-09-09
可能是全网vue v-model最详细讲解教程
Vue官网教程上关于v-model的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下,下面这篇文章主要给大家介绍了关于vue v-model最详细讲解的相关资料,需要的朋友可以参考下
2022-11-11