当前位置: 首页 > 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…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...