vue3 组合式api中 ref 和$parent 的使用

ref 的使用

vue3中, 在 组件中添加一个 component ref=“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了

ref 的使用方法

在这里插入图片描述

vue3中ref 的特点

以上如果在vue2中,就可以使用 子组件的对象来改变子组件的数据, 和调用子组件的方法了, 但是在vue3 , 这样做还是不行的, 还要做一步操作才可以,也就是要在子组件中, 把父组件想用的方法或属性暴露出去才可以
在这里插入图片描述

以上是父组件通过 ref 来得到子组件的对象, 进而控制子组件中的 属性和方法
那么我们通过子组件, 如何去控制父组件的属性和方法呢。那就不止一种方法了
emit mitt(bus) 都是可以了, 这里要说的是 和 ref 相类似的 $parent 方法
$parent 可以添加在子组件中的事件参数上, 参数名称必须是 $parent,这样在事件的回调方法中就可以,得到父组件的对象, 并控制其中的属性和方法了。
同样的道里, 我们要在父组件中, 把要使用的方法或属性暴露出来才可以使用


下面给出一个样例, 父组件中的按钮可以改变子组件中的属性, 并且子组件中的按钮可以改变父组件中的

父组件

<template><div class="baba">我是父组件, 我的资产是 {{money}}<button @click="borrow100">点击我从儿子那里拿1000</button><hr/><erzi ref="son"></erzi>   //变量中定义一个和 ref 同名的,就可以得到子组件的对象</div>
</template><script setup>import {ref} from "vue";import erzi from "@/views/Home/erzi.vue";let money = ref(100000000);let son = ref()   //通过 ref 获取到子组件的对象const borrow100 = ()=>{   //这里点击了父组件的按钮, 去改变子组件的 money  属性money.value+=1000;son.value.money -= 1000;}defineExpose({money})	//这里是通过暴露父组件的 money 属性, 给子组件来使用
</script>

子组件

<template><div class="erzi">我是子组件, 我的资产是 {{ money }}<button @click="yao20($parent)">点击我们父亲那里拿 20</button>//这里子组件的事件使用的 $parent 来做参数,必须使用 $parent 才可以得到父组件的对象</div>
</template><script setup>import {ref} from "vue";let money = ref(88888888);const yao20 = (p)=>{    //这是子组件中的事件, 触发更改父组件的属性//根据传参可以知道  p 就是父组件的对象money.value +=20;p.money -=20;}defineExpose({			//这里是暴露 子组件的 money属性, 因为父组件需要使用,//如果需要的话, 这里也可以暴露方法money})
</script>

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

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

相关文章

给设计团队管理者的6个建议优漫动游

即使以前从未担任过领导职务&#xff0c;作为一名设计师&#xff0c;你也已经习惯了仔细地考虑用户体验&#xff0c;这一技能在你领导团队时也会很有用。你需要设计一个环境和结构来使你的成员们完成最好的工作&#xff0c;让公司和用户都能受益。一本名为《DesignLeadershipHa…

删除、移动、复制文件时总是要卡在99%一段时间解决方法

Win10文件夹重命名、移动、删除等操作卡顿3-5秒。 原因分析: 查看发现&#xff0c;卡顿期间资源管理器无响应&#xff0c;并且其高度占用CPU资源&#xff0c;但是对于非文件夹文件操作没有问题。 解决方案: 1、双击“此电脑”&#xff0c;选择“查看”&#xff0c;再选择“选…

DockerCompose常用命令

DockerCompose常用命令 在上一篇博客中&#xff0c;我们对DockerCompose有了一个初步的认识&#xff0c;以及介绍了多种安装方式&#xff0c;本文继续介绍DockerCompose的常用命令。 DockerCompose中常常用到两个术语&#xff0c;一个是服务&#xff0c;一个是项目。服务常常代…

Redis面试题大全含答案

1.什么是Redis&#xff1f; 答&#xff1a;Remote Dictionary Server(Redis)是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提供多种语言的API。 它通常被称为数据结构服务器&#xff0c;因为值&#xff08;value&…

三、mycat分库分表

第五章 分库分表 一个数据库由很多表的构成&#xff0c;每个表对应着不同的业务&#xff0c;垂直切分是指按照业 务将表进行分类&#xff0c;分布到不同 的数据库上面&#xff0c;这样也就将数据或者说压力分担到不同 的库上面&#xff0c;如下图&#xff1a; 系统被切分成了&…

常静相伴:深度解析C++中的const与static关键字

个人主页&#xff1a;北海 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏✨收录专栏&#xff1a;C/C&#x1f91d;希望作者的文章能对你有所帮助&#xff0c;有不足的地方请在评论区留言指正&#xff0c;大家一起学习交流&#xff01;&#x1f9…

时间切片

1. 下次绘制交互 (INP) 下次绘制交互 (INP) 是一项新的指标&#xff0c;浏览器计划于 2024 年 3 月将其取代取代首次输入延迟 (FID) &#xff0c;成为最新的 Web Core Vitals(Web 核心性能指标)。 2. 时间切片-scheduler.yield 背景&#xff1a;用户任务完成自动释放控制权给主…

打怪(easy)

B-打怪(easy)_第二十届同济大学程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 问题描述&#xff1a;初始攻击是1&#xff0c;防御是0&#xff0c;血量无穷。怪物防御力永远为0&#xff0c;只有初始血量和攻击力。双方每次受到的攻击会掉对手攻击-自己防御的血量…

[golang 流媒体在线直播系统] 1.直播的简单介绍以及借助腾讯云直播实现在线直播

一.直播的简单介绍 1.介绍 直播,应该不陌生,有电视直播、网络主播、游戏直播、体育直播、在线教育直播等等,那么要实现在线直播的话就 必须要有 “ 流媒体在线直播服务器 ”. “流媒体在线直播服务器 ”不仅可以 实现游戏、赛事、电商、媒体、教育等行业的直播, 还可以实现 …

java八股文面试[多线程]——并发三大特性 原子 可见 顺序

AutomicInteger : volatile CAS 总线LOCK MESI 两个协议 TODO volatile的可见性和禁止重排序是怎么实现的&#xff1a; DCL场景&#xff1a; new操作会在字节码层面生成两个步骤&#xff1a; 分配内存、调用构造器 然后把引用赋值给singleton 不加volatile则会发生指令重…

Docker从认识到实践再到底层原理(二-2)|Namespace+cgroups

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

ssm+vue乐购游戏商城系统源码和论文

ssmvue乐购游戏商城系统源码和论文115 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着社会的发展&#xff0c;游戏品种越来越多&#xff0c;计算机的优势和普及使得乐购游戏商城系统的开发成为必需…

mysql 表备份 遇到的问题 【全网最全】

目录 省流&#xff1a; 正文&#xff1a; 1、报错 2、原因 3、解决方法 方法一&#xff1a;关闭 ENFORCE_GTID_CONSISTENCY &#xff08;不推荐&#xff09;&#xff1a; 方法二&#xff08;推荐&#xff09;&#xff1a; 4、开启关闭GTID 省流&#xff1a; 不推荐如…

Databricks 入门之sql(二)常用函数

1.类型转换函数 使用CAST函数转换数据类型&#xff08;可以起别名&#xff09; SELECTrating,CAST(timeRecorded as timestamp) FROMmovieRatings; 支持的数据类型有&#xff1a; BIGINT、BINARY、BOOLEAN、DATE 、DECIMAL(p,s)、 DOUBLE、 FLOAT、 INT、 INTERVAL interva…

SpringBatch简述

前言 ​ 如今微服务架构应用增多&#xff0c;但在企业里还存在海量数据的批处理场景。诸如银行的金融机构中&#xff0c;每天有3-4万笔的批处理作业需要处理。而常见处理方案有&#xff1a; 1、数据脚本跑批 2、批处理框架 3、多线程事务处理方案。 ​ 在满足基本功能之外…

自智网络简介

网络随着业务和流量的发展&#xff0c;已经变的无比复杂&#xff0c;很难通过人力管理&#xff0c;因此业界提出了自智网络(自动驾驶网络)的概念。普林斯顿大学的Nick Feamster和Jennifer Rexford在本文中探讨了为什么网络需要自动化&#xff0c;以及达成这一目标的路径。原文:…

自制centos7.9的wsl发行版

自制centos7.9的wsl发行版 参考&#xff1a;https://zhuanlan.zhihu.com/p/482538727 Windows10提供了一个wsl工具用于直接在windows上运行Linux子系统。 CentOS国内镜像下载&#xff1a;https://mirrors.aliyun.com/centos/ 这里选择了7.9.2009版本&#xff1a;https://mirr…

android studio git没有显示Local Changes界面

设置android studio git没有显示Local Changes界面 Setting -> Version Control-> commit -> 把use non-modal commit interface 的勾勾去掉&#xff0c;如下图所示 然后点击apply&#xff0c;回到git界面就看到了&#xff0c;亲测有效

2023年7月京东护发市场数据分析(京东数据产品)

如今&#xff0c;与面部护肤相比&#xff0c;多数消费者认为头皮也需要认真对待&#xff0c;这在年轻消费群体中体现的较为明显。 随着消费者对护发理念的认同感不断加深&#xff0c;人们日常居家洗护的步骤也更加精细、使用产品品类也愈加多样化。除传统的护发素、发膜等护发…

Web3 社交平台如何脱颖而出?我们和 PoPP 聊了聊

能够颠覆 Web2 传统模式的社交产品有着怎样的特征&#xff1f;PoPP 作为专注于 Web3 的私域流量变现平台&#xff0c;为开发者和用户提供了社交产品发展的新路径&#xff0c;让社区用户充分实现互动交流&#xff0c;着力于创作内容的激励与变现。事实上&#xff0c;面对 Web3 社…