当前位置: 首页 > news >正文

vue3组合式api 父子组件数据同步v-model语法糖的用法

V-model 大多数情况是用在 表单数据上的, 但它不止这一个作用


父子组件的数据同步, 有一个 语法糖 v-model,这个方法简化了语法, 在elementplus中,都有很多地方使用, 所以我们要理解清楚


父组件
使用 v-model 向子组件, 传递了一个 money 的数据

<template><div class="parentwrapper">我是父组件, 我的money是 {{money}}<hr/><child v-model="money"></child></div>
</template><script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
</script>

子组件

<template><div class="child">我从父组件那里得到 {{props.modelValue}}<button @click="changeMoney">我来改变父组个的money</button></div>
</template><script setup>let props = defineProps(["modelValue"]);let emit = defineEmits(["update:modelValue"]);const changeMoney = ()=>{emit("update:modelValue",props.modelValue+1000);}
</script>

从上面的代码中可以看到,
v-model 对父组件的代码量是有明显减少的, 对子组件中的代码量没有变化, 子组件 一方面是要在 prop 中接收 父组件隐式传来的属性名 modelValue , 另一方面要在子组件中的 自定义一个名为 update:modelValue 的一个事件, 当 子组件的 dom click 事件触发后, 调用 emit(“update:modelValue”)


这种方式对我们写的组件进行封装是很有做用的,子组件封装好方法, 父组件只需要使用 v-model 就可以,同步子组件中的数据了


v-model的进阶用法

上面的例子中,v-model只能在一个子组件中写一次, 那如果我有两个或多个数据要和子组件同步怎么办呢?
我们可以使用 v-model:XXX 来解决

我们在父组件中 利用 v-model 向子组件传递了两个数据 money 和 person

<template><div class="parentwrapper">我是父组件, 我的money是 {{money}}<hr/><child v-model:money="money" v-model:person="person"></child></div>
</template><script setup>
import {ref} from "vue";
import child from "@/views/Home/child.vue";
let money = ref(10000);
let person = ref("孙悟空")
</script>

在子组件中,我们接收到父组件的 v-model:XXX 传来数据

<template><div class="child">我从父组件那里得到 {{props.money}}-------{{person}}<button @click="changeMoney">我来改变父组个的money</button><button @click="changePerson">我来改变父组件中的person</button></div>
</template><script setup>let props = defineProps(["money","person"]);let emit = defineEmits(["update:moeny","update:person"]);const changeMoney = ()=>{emit("update:money",props.money+1000);}const changePerson = ()=>{emit("update:person","如来佛祖");}</script>

从上面的代码, 我们看到, 我们在子组件中, 使用 prop 接收了, v-model:XXX 中的 XXX 属性
同时, 我们定义了两个对象的自定义事件 update:XXX 事件
当子组件的 dom click 事件触发时 就emit:XXX 事件

——————

父组件中没有添加任何代码就,实现了父子组件的数据同步

这就是 V-model 的语法糖的效果

相关文章:

vue3组合式api 父子组件数据同步v-model语法糖的用法

V-model 大多数情况是用在 表单数据上的&#xff0c; 但它不止这一个作用 父子组件的数据同步&#xff0c; 有一个 语法糖 v-model&#xff0c;这个方法简化了语法&#xff0c; 在elementplus中&#xff0c;都有很多地方使用&#xff0c; 所以我们要理解清楚 父组件 使用 v-mod…...

环境异常总结

1.vue项目 npm run dev 运行时报错&#xff1a;webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 不是内部或外部命令 原因&#xff1a;webpack-dev-server存在问题 解决方案&#xff1a;指定 webpack-dev-server 低版本号 方法&#xff1a; 删除 …...

[论文笔记]DSSM

引言 这是DSSM论文的阅读笔记,后续会有一篇文章来复现它并在中文数据集上验证效果。 本文的标题翻译过来就是利用点击数据学习网页搜索中深层结构化语义模型,这篇论文被归类为信息检索,但也可以用来做文本匹配。 这是一篇经典的工作,在DSSM之前,通常使用传统机器学习的…...

Skip Connection——提高深度神经网络性能的利器

可以参考一下这篇知乎所讲 https://zhuanlan.zhihu.com/p/457590578 长跳跃连接用于将信息从编码器传播到解码器&#xff0c;以恢复在下采样期间丢失的信息...

EXCEL中点击单元格,所在行和列都改变颜色

在日常工作中&#xff0c;尤其是办公室工作人群&#xff0c;尝尝需要处理大量的数据&#xff0c;在对数据进行修改时&#xff0c;时长发生看错行的事情&#xff0c;导致数据越改越乱&#xff0c;因此&#xff0c;我常用的一种方法就是选中单元格时&#xff0c;所在行、列标记为…...

HAProxy(一)

四层负载均衡与七层负载均衡区别 四层负载均衡和七层负载均衡是两种不同的负载均衡方式&#xff0c;主要区别在于负载均衡的层级及其所支持的协议不同。 四层负载均衡&#xff0c;也称为传输层负载均衡&#xff0c;工作在 OSI 模型的传输层&#xff08;第四层&#xff09;&am…...

LeetCode--HOT100题(46)

目录 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09; 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链…...

深度探索JavaScript中的原型链机制

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…...

一种基于WinDump自动抓包实现方法

本发明的技术方案包括以下步骤和组件&#xff1a; 配置抓包参数&#xff1a;设置抓包的IP、端口以及过滤包大小等参数&#xff0c;以控制抓取的数据范围。循环自动抓包&#xff1a;利用WinDump工具实现循环自动抓包功能&#xff0c;类似于记录日志的方式保留抓包数据。当抓包数…...

taro 支付宝/微信小程序/h5 上传 - base64的那些事儿

支付宝小程序临时path转base64 - 基础库2.0以下 function getImageInfo(path) {return new Promise(resolve > {my.getImageInfo({src: path,success: res > {resolve(res)}})}) } export async function getBase64InAlipay({ id, path }) {const { width, height } awa…...

java之SpringBoot基础、前后端项目、MyBatisPlus、MySQL、vue、elementUi

文章目录 前言JC-1.快速上手SpringBootJC-1-1.SpringBoot入门程序制作&#xff08;一&#xff09;JC-1-2.SpringBoot入门程序制作&#xff08;二&#xff09;JC-1-3.SpringBoot入门程序制作&#xff08;三&#xff09;JC-1-4.SpringBoot入门程序制作&#xff08;四&#xff09;…...

Vue-Router 一篇搞定 Vue3

前言 在 Web 前端开发中&#xff0c;路由是非常重要的一环&#xff0c;但是路由到底是什么呢&#xff1f; 从路由的用途上讲 路由是指随着浏览器地址栏的变化&#xff0c;展示给用户不同的页面。 从路由的实现原理上讲 路由是URL到函数的映射。它将 URL 和应用程序的不同部分…...

深度解读智能媒体服务的重组和进化

统一“顶设”的智能媒体服务。 邹娟&#xff5c;演讲者 大家好&#xff0c;首先欢迎各位来到LVS的阿里云专场&#xff0c;我是来自阿里云视频云的邹娟。我本次分享的主题为《从规模化到全智能&#xff1a;智能媒体服务的重组与进化》。 本次分享分为以上四部分&#xff0c;一是…...

亲测有效!Win7中如何安装高版本的NodeJS

正常情况下&#xff0c;Win7支持的Node.js最高版本是V13.14&#xff0c;但在开发过程中&#xff0c;有不少Vue项目或其他需要依赖Node环境的项目&#xff0c;对Node版本要求都比较高。对此&#xff0c;我们要么重装操作系统到Win8以上&#xff0c;要么就得想办法在Win7中安装高…...

Python基础__with open()用法

1、open与with open区别 open&#xff08;&#xff09;完成后必须调用close()方法关闭文件&#xff0c;因为文件对象会占用操作系统的资源&#xff0c;并且操作系统同一时间能打开的文件数量也是有限的&#xff0c;由于文件读写时都有可能产生IOError&#xff0c;一旦出错&…...

深入理解 JavaScript 对象、属性、解构和增强语法

ECMA-262将对象定义为一组属性的无序集合。 1 内部属性描述 1.1 数据属性 [[Configurable]]&#xff1a;可配置性&#xff0c;直接定义在对象的属性该特性默认为true&#xff0c;表示可以对属性进行删除、修改等操作。[[Enumerable]]&#xff1a;可枚举性&#xff0c;直接定…...

2023年IT服务行业研究报告

第一章 行业概况 1.1 定义 IT服务行业是一个广泛的术语&#xff0c;涵盖了所有提供技术支持和服务的公司。这些服务包括系统集成&#xff0c;云计算服务&#xff0c;软件和硬件支持&#xff0c;网络服务&#xff0c;咨询服务&#xff0c;以及一系列其他类型的技术服务。此外&…...

腾讯云服务器镜像TencentOS Server有用过的吗?

腾讯云服务器镜像TencentOS Server操作系统有用过的吗&#xff1f;踩过坑吗&#xff1f;TencentOS性能和稳定性如何&#xff1f;TencentOS Server与CentOS保持兼容&#xff0c;在稳定性、性能、容器基础设施等核心能力方面做了全面的增强和优化&#xff0c;能为企业提供稳定高可…...

小区村庄集中生活废水处理设备厂家直销价格

小区村庄集中生活废水处理设备厂家直销价格 设备的构造 1、填料 该填料选用特制塑料和树脂组成&#xff0c;结构科学、新颖、填料比表面积达1000m2/m3&#xff0c;比重轻0.97g/cm3&#xff0c;不堵塞、易挂膜。 该填料是由纤细球体&#xff0c;网络外壳和通心多孔柱体组成的球形…...

Redisson实现分布式锁案例

Redisson实现分布式锁案例 引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.23.2</version> </dependency>创建Redisson配置类 Configuration pub…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...