【uni-app】 .sync修饰符与$emit(update:xxx)实现数据双向绑定

最近在看uni-app文档,看到.sync修饰符的时候,觉得很有必要记录一下
其实uni-app是一个基于Vue.js和微信小程序开发框架的跨平台开发工具
所以经常会听到这样的说法,只要你会vue,uni-app就不难上手
在看文档的过程中,发现确实很多东西都不陌生,包括.sync修饰符,在vue2的项目中使用的也是很普及的
因为工作需要,可能下半年的侧重点都在uni-app上,谨以此篇,开启我的uni-app之旅

戳这里,跳转uni-app文档

在这里插入图片描述
官网示例代码:

	<!-- 父组件 --><template><view><syncA :title.sync="title"></syncA></view></template><script>export default {data() {return {title:"hello vue.js"}}}</script>
	<!-- 子组件 --><template><view><view @click="changeTitle">{{title}}</view></view></template><script>export default {props: {title: {default: "hello"},},methods:{changeTitle(){//触发一个更新事件this.$emit('update:title',"uni-app")}}}</script>

uni-app中,.sync修饰符是用来双向绑定父子组件的数据,它的实现原理是通过将父组件的数据传递给子组件,并在子组件中使用.sync修饰符来指定更新父组件数据的事件。

说.sync修饰符前,先说一下我们正常的父子组件传值及在子组件中如何修改父组件的值,以下图定义的title举例

1、在父组件中定义数据及传递给子组件
在这里插入图片描述
2、子组件中接收数据,定义触发修改值的方法及$emit触发自定义事件携带参数到父组件
在这里插入图片描述
3、父组件中接收自定义事件,在自定义事件中修改值

在这里插入图片描述

正常的父子组件传值及修改值,需要props传递属性到子组件,然后需要子组件触发自定义事件到父组件去改值。而为什么不能直接在子组件中接收及直接在子组件中修改,这个在学vue基础知识的时候,是大家都绕不开的基础知识点,因为vue是单向数据流,为了保证数据的单向流动,便于对数据的追踪,出现错误可以更迅速的定位到错误的位置

单向数据流
所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。这避免了子组件意外修改父组件的状态的情况,不然应用的数据流将很容易变得混乱而难以理解。
另外,每次父组件更新后,所有的子组件中的 props 都会被更新到最新值,这意味着你不应该在子组件中去更改一个 prop

说完父子传值props,现在来说.sync修饰符
1、在父组件中定义数据及传递给子组件
在这里插入图片描述
2、子组件中接收数据,定义触发修改值的方法及$emit触发update:xxx事件直接修改值
在这里插入图片描述
对比props父子传值及.sync修饰符双向绑定,最直观的感受就是代码简化了
.sync 修饰符实质就是父组件监听子组件更新某个props的请求的缩写语法,一种语法糖。

:title.sync="title"
//写法等同于
:title="title"
@update:title="title = $event"

总结:

区别:

传值方式:props是一种父组件向子组件传递数据的方式,通过将数据作为props属性传递给子组件;而.sync修饰符是一种实现双向数据绑定的方式,可以在父子组件间实现数据的双向传递。

数据更新方式:对于props,子组件不能直接修改父组件传递的数据,只能通过在子组件内部触发事件或调用方法来通知父组件去更新数据;而使用.sync修饰符,子组件可以直接修改父组件的数据,子组件更新时会直接影响到父组件中对应的数据。

优点和缺点:

props的优点

明确的数据流:props通过显式地传递数据,使得数据的来源和使用更加清晰明确。
数据单向流动:props的数据只能由父组件向子组件传递,避免了数据的混乱和不可预测性。
较好的可维护性:props作为接口定义,可以提高组件的可维护性和可复用性。
缺点:

相对繁琐:对于较为复杂的数据传递和组件间的通信,需要通过定义多个props,增加了代码的复杂度。
需要额外的事件机制:子组件需要通过事件或方法通知父组件进行数据更新,增加了一定的开发成本和复杂度。
.sync修饰符的优点:

简洁的语法:使用.sync修饰符可以简洁地实现父子组件的双向数据绑定。
方便的数据更新:子组件可以直接修改父组件的数据,子组件的变化会直接影响到父组件中对应的数据。
缺点:

数据绑定不够明确:由于子组件可以直接修改父组件的数据,可能导致数据变得不可预测,增加了调试和维护的难度。
双向绑定可能带来性能问题:频繁的数据变动可能导致性能问题,需要合理控制双向绑定的使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/41739.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.netcore grpc客户端工厂及依赖注入使用

一、客户端工厂概述 gRPC 与 HttpClientFactory 的集成提供了一种创建 gRPC 客户端的集中方式。可以通过依赖包Grpc.Net.ClientFactory中的AddGrpcClient进行gRPC客户端依赖注入AddGrpcClient函数提供了许多配置项用于处理一些其他事项&#xff1b;例如AOP、重试策略等 二、案…

miniExcel 生成excel

一、nuget dotnet add package MiniExcel --version 1.31.2 二、新建表及数据 ExampleProducts 三、这里我用了Dapper.Query方法 读取excel public virtual async Task<IActionResult> Anonymous(){try{//using (var connection _dbContext.GetDbConnection())//{//…

linux中的ifconfig和ip addr

在linux操作系统中ifconfig和ip addr都是显示网卡配置信息的命令&#xff0c;好多人有疑惑它们有什么区别呢 区别1&#xff1a;对于linux发行的版本不一样 ip addr是对新发行版本的linux使用会比较多&#xff1b;而ifconfig是老版本遇到使用的会比较多。 区别2&#xff1a;显…

基于 KubeSphere 的应用容器化在智能网联汽车领域的实践

公司简介 某国家级智能网联汽车研究中心成立于 2018 年&#xff0c;是担当产业发展咨询与建议、共性技术研发中心、创新成果转化的国家级创新平台&#xff0c;旨在提高我国在智能网联汽车及相关产业在全球价值链中的地位。 目前着力建设基于大数据与云计算的智能汽车云端运营…

RestTemplate

RestTemplate介绍 RestTemplate是Spring提供的用于访问RESTful服务的客户端&#xff0c;RestTemplate提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率。RestTemplate默认依赖JDK提供http连接的能力&#xff08;HttpURLConnection&#xff09;&#xff0c;…

【数据结构】链表常见题目

文章目录 链表合并两个有序链表反转链表复制带随机指针的链表环形链表环形链表II相交链表移除链表元素链表中倒数第k个节点链表分割链表的回文结构链表的中间节点旋转链表链表排序链表求和 (逆序求)链表求和II (正序求)重排链表奇偶链表反转链表II <==> 链表内指定区间反…

(二)掌握最基本的Linux服务器用法——Linux下简单的C/C++ 程序、项目编译

1、静态库与动态库 静态库(Static Library)&#xff1a;静态库是编译后的库文件&#xff0c;其中的代码在编译时被链接到程序中&#xff0c;因此它会与程序一起形成一个独立的可执行文件。每个使用静态库的程序都会有自己的库的副本&#xff0c;这可能会导致内存浪费。常用后缀…

opencv简单使用

cv2库安装&#xff0c; conda install opencv-python注意cv2使用时&#xff0c;路径不能有中文。&#xff08;不然会一直’None’ _ update # 处理中文路径问题 def cv_imread(file_path): #使用之前需要导入numpy、cv2库&#xff0c;file_path为包含中文的路径return cv2.imd…

idea入门与maven配置的一些介绍

idea入门与maven配置的一些介绍 1.确保Java和Maven已安装2.创建一个新的Maven项目3.导航到要创建项目的目录配置Maven4.配置项目的pom.xml文件5.配置其他Tomcat和设置jdk6.构建和运行项目 关于idea入门基础配置 步骤1&#xff1a;安装IntelliJ IDEA 首先&#xff0c;从IntelliJ…

计算机竞赛 python+大数据校园卡数据分析

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于yolov5的深度学习车牌识别系统实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&am…

记录一个编译TubeTK时的报错:at_check问题

在使用如下命令安装TubeTK的cuda_nms时&#xff0c;报了一个错误&#xff0c;记录一下这个错误和解决办法 (base) redmeryredmery:~/Desktop/MOT/TubeTK/post_processing/nms$ python setup.py build_ext --inplace因为这个命令是在/home/redmery/Desktop/MOT/TubeTK/install/…

Talk | ACL‘23 杰出论文奖上海交通大学吴蔚琪:预训练语言模型对本体知识的记忆与理解

本期为TechBeat人工智能社区第523期线上Talk&#xff01; 北京时间8月17日(周四)20:00&#xff0c;上海交通大学硕士研究生—吴蔚琪的Talk已准时在TechBeat人工智能社区开播&#xff01; 她与大家分享的主题是: “预训练语言模型对本体知识的记忆与理解”&#xff0c;分享了预训…

Python入门【TCP建立连接的三次握手、 TCP断开连接的四次挥手、套接字编程实战、 TCP编程的实现、TCP双向持续通信】(二十七)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小王&#xff0c;CSDN博客博主,Python小白 &#x1f4d5;系列专栏&#xff1a;python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 &#x1f4e7;如果文章知识点有错误…

【c语言】通讯录(动态版+文件+背景音乐)含源码

开饭了&#xff0c;之前写的通讯录&#xff0c;是否会有人觉得申请1000人的空间是不是有点用不上呀&#xff0c;怎么才能做到要多少申请多少个呢&#xff1f;&#xff1f;我们学完动态内存管理&#xff0c;和文件的相关操作&#xff0c;终于可以继续完善我们的通讯录了 船新版本…

数据结构:二叉树的递归实现(C实现)

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》 文章目录 前言一、树的概念二、二叉树二叉树的概念二叉树的性质 三、二叉树链式结构实现二叉树节点定义创建二叉树节点遍历二叉树先序遍历二叉树(BinaryTreePrevOrder)中序遍历二叉树(BinaryTree…

Air780EG —— 合宙4G定位解决方案

定位模式&#xff1a; 外部单片机控制模式(常见于AT固件客户)&#xff1a; 开机 -> 搜星 -> 定位成功 -> 上报 -> 关机 780E自行控制模式(常见于二次开发客户&#xff0c;AT用户也可以使用): 开机 -> 搜星 -> 定位成功 -> 模块休眠&#xff0c;关闭GP…

亿发创新中医药信息化解决方案,自动化煎煮+调剂,打造智能中药房

传统中医药行业逐步复兴&#xff0c;同时互联网科技和人工智能等信息科技助力中医药行业逐步实现数字化转型。利用互联网、物联网、大数据等科技&#xff0c;实现现代科学与传统中医药的结合&#xff0c;提供智能配方颗粒调配系统、中药自动化调剂系统、中药煎配智能管理系统、…

如何切换goland之中的版本号(升级go 到1.20)

go 安装/版本切换_go 切换版本_云满笔记的博客-CSDN博客 用brew就行&#xff1a; echo export PATH"/opt/homebrew/opt/go1.20/bin:$PATH" >> ~/.zshrc

Linux6.40 Kubernetes 配置资源管理

文章目录 计算机系统5G云计算第三章 LINUX Kubernetes 配置资源管理一、Secret1.Secret 四种类型1&#xff09;kubernetes.io/service-account-token2&#xff09;Opaque3&#xff09;kubernetes.io/dockerconfigjson4&#xff09;kubernetes.io/tls 2.Pod 需要先引用才能使用某…