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

Vue3 - $refs 使用教程,父组件调用获取子组件数据和方法(setup() / <script setup>)

前言

在 Vue2 中父组件使用 $refs 调用子组件数据和方法非常简单,但在 Vue3 中这种方法行不通了。

本文实现了 Vue3 中父组件使用 $refs 获取调用子组件数据和方法教程,

并且提供了 setup()<script setup> 两种 “开发模式” 的示例代码,请根据需要进行选择。


网上的文章教程太乱且大部分都没遵守 “标准语法” ,全是各种问题 BUG 根本用不了,

本文采用最新官方标准语法,给出超级详细的注释和示例代码。


<script setup> 语法糖

以下示例,清楚的表示了如何实现。

父组件:

<template><div><!-- 子组件 --

相关文章:

Vue3 - $refs 使用教程,父组件调用获取子组件数据和方法(setup() / <script setup>)

前言 在 Vue2 中父组件使用 $refs 调用子组件数据和方法非常简单,但在 Vue3 中这种方法行不通了。 本文实现了 Vue3 中父组件使用 $refs 获取调用子组件数据和方法教程, 并且提供了 setup() 与 <script setup> 两种 “开发模式” 的示例代码,请根据需要进行选择。 网…...

华为OD机试 - 众数和中位数(Python)| 真题+思路+考点+代码+岗位

众数和中位数 题目 众数是指一组数据中出现次数多的数 众数可以是多个中位数是指把一组数据从小到大排列,最中间的那个数, 如果这组数据的个数是奇数,那最中间那个就是中位数 如果这组数据的个数为偶数,那就把中间的两个数之和除以 2 就是中位数查找整型数组中元素的众数并…...

一眼万年的 Keychron 无线机械键盘

一眼万年的 Keychron 无线机械键盘 一款好的键盘对于程序员或者喜欢码字的人来说是非常重要的&#xff0c;而最近博主入手了自己的第一款机械键盘——Keychron 无线机械键盘。 机械键盘特点 有独立轴体&#xff0c;通过两个簧接触&#xff0c;来触发信号&#xff0c;价格相对贵…...

自动化测试高频面试题(含答案)

Hello&#xff0c;你们的好朋友来了&#xff01;今天猜猜我给大家带来点啥干货呢&#xff1f;最近很多小伙伴出去面试的时候经常会被问到跟自动化测试相关的面试题。所以&#xff0c;今天特意给大家整理了一些经常被公司问到的自动化测试相关的面试题。停&#xff0c;咱先收藏起…...

3、按键扫描检测处理

说明&#xff1a;本文处理按键的短按、长按检测执行&#xff0c;非矩阵按键 硬件可以类似如下连接即可&#xff0c;无需放置上下拉电阻&#xff1b; 按键动作分长按、短按(弹起时执行)两种 按下不放执行长按&#xff0c;但松开按键时不予执行短按函数 多个按键可以同时操作 按…...

集中式存储和分布式存储

分布式存储是相对于集中式存储来说的&#xff0c;在介绍分布式存储之前&#xff0c;我们先看看什么是集中式存储。不久之前&#xff0c;企业级的存储设备都是集中式存储。所谓集中式存储&#xff0c;从概念上可以看出来是具有集中性的&#xff0c;也就是整个存储是集中在一个系…...

【机器学习数据集】如何获得机器学习的练习数据?

一、scikit-learn自带数据集Scikit-learn内置了很多可以用于机器学习的数据&#xff0c;可以用两行代码就可以使用这些数据。自带的小的数据集为&#xff1a;sklearn.datasets.load_<name>load_bostonBoston房屋价格回归506*13fetch_california_housing加州住房回归20640…...

【编程实践】使用 Kotlin HTTP 框架 Fuel 实现 GET,POST 接口 kittinunf.fuel【极简教程】

目录 Fuel 简介 实现代码 GET网络请求用法(有三种写法࿰...

大数据DataX(一):DataX的框架设计和插件体系

文章目录 DataX的框架设计和插件体系 一、DataX是什么...

软考高级信息系统项目管理师系列之十一:项目进度管理

软考高级信息系统项目管理师系列之十一:项目进度管理 一、进度管理领域输入、输出、工具和技术表二、项目进度管理1.项目进度管理过程2.项目进度管理三、项目进度管理过程1.项目进度管理2.工作包和活动3.活动清单4.活动属性5.项目进度网络图6.资源日历7.活动资源需求8.资源分解…...

vue2版本《后台管理模式》(下)

文章目录前言一、home 页以下都属于home子组件二、header 头部 组件二、Menu 页面三、Bread 面包屑四、Footer五 、分页器&#xff1a; Pageing![在这里插入图片描述](https://img-blog.csdnimg.cn/fbe9bb7e84a04ccda4d3fc9f4ab9c36b.png#pic_center)六、权限管理总结前言 这章…...

软考中级-程序设计语言

&#xff08;1&#xff09;解释器解释源程序时不生成独立的目标代码&#xff0c;源程序和解释程序都参与到程序执行中。&#xff08;2&#xff09;编译器编译时生成独立的目标代码&#xff0c;运行时是运行与源程序等价的目标程序&#xff0c;源程序不参与执行。阶段补充&#…...

Sphinx : 高性能SQL全文检索引擎

Sphinx是一款基于SQL的高性能全文检索引擎&#xff0c;Sphinx的性能在众多全文检索引擎中也是数一数二的&#xff0c;利用Sphinx&#xff0c;我们可以完成比数据库本身更专业的搜索功能&#xff0c;而且可以有很多针对性的性能优化。 Sphinx的特点 快速创建索引&#xff1a;3分…...

ansible实战应用系列教程6:管理ansible变量

ansbile实战应用系列教程6:管理ansible变量 Ansible VariablesNaming VariablesDefining Variables在playbook中定义变量Defining Variables in Playbooks在playbooks中使用VariablesHost Variables and Group Variables使用group_vars和host_vars目录命令行定义全局变量Varia…...

java8新特性Stream流中anyMatch和allMatch和noneMatch的区别详解

1、anyMatch 判断数据列表中是否存在任意一个元素符合设置的predicate条件&#xff0c;如果是就返回true&#xff0c;否则返回false。 接口定义&#xff1a; boolean anyMatch(Predicate<? super T> predicate); 方法描述&#xff1a; 在anyMatch 接口定义中是接收 Pr…...

双网卡(有线和wifi)同时连接内网和外网

双网卡&#xff08;有线和wifi&#xff09;同时连接内网和外网 Win10技巧&#xff1a;如何修改有线/WiFi网络优先级&#xff1a;https://www.ithome.com/html/win10/253612.htm双网卡实现两个网络的自由访问&#xff1a;https://blog.51cto.com/ghostlan/1299090Linux服务器安…...

如何赋能智能运维,迈出数字化黑匣子第一步?

在当下大数据时代&#xff0c;诸多行业专家为企业智能运维绘出美好蓝图。在该蓝图中&#xff0c;互联网、云计算、大数据分析联合发力&#xff0c;企业在能“攻”能“守”中快速、可持续发展。何为“攻”&#xff1f;对支撑企业产品研发、生产、管理、营销等各业务链条的IT基础…...

消息称索尼计划为PS5推出两款蓝牙耳机,Find My蓝牙耳机用途广

根据国外科技媒体 Insider Gaming 报道&#xff0c;索尼计划进一步丰富 PlayStation 5 的配件生态&#xff0c;将会推出两款耳机&#xff0c;一款采用类似于 AirPods 的 TWS 设计&#xff0c;另一款则是无线头戴式耳机。 消息称 TWS 耳机的内部代号为“Project Nomad”&#…...

状态管理VueX

哈喽~大家好&#xff0c;这篇来看看状态管理VueX。 &#x1f947;个人主页&#xff1a;个人主页​​​​​ &#x1f948; 系列专栏&#xff1a;【专栏】 &#x1f949;与这篇相关的文章&#xff1a; SpringCloud Sentinel 使用SpringClou…...

i.MX8MP平台开发分享(clock篇)- PLL14xx驱动

专栏目录:专栏目录传送门 平台内核i.MX8MP5.15.71文章目录 clk_pll14xx_prepareclk_pll14xx_is_preparedclk_pll1443x_set_rateclk_pll14xx_round_rateclk_pll1443x_recalc_rate在前面的文章i.MX8MP平台开发分享(clock篇)- 各类clock的注册,我们提到VIDEO_PLL1,GPU_PLL等P…...

课程规范性要求

课程制作规范 图片规范 允许范围&#xff1a;CC协议 / 作者授权 / 网站代理授权书 图片大小要求&#xff1a;1600 x 1200 dpi 图片长宽比&#xff1a;4&#xff1a;3 每章节格式要求 Week number 本周目标 1.通过背景学习&#xff0c;了解四足机器狗mini pupper上的微型控…...

华为OD机试 - 优秀学员统计(Python)| 真题+思路+考点+代码+岗位

优秀学员统计 题目 公司某部门软件教导团正在组织新员工每日打卡学习活动,他们开展这项学习活动已经一个月了,所以想统计下这个月优秀的打卡员工。每个员工会对应一个 id,每天的打卡记录记录当天打卡员工的 id 集合,一共 30 天。 请你实现代码帮助统计出打卡次数 top5 的…...

布林线(BOLL)计算公式详解,开口收口代表什么

布林带&#xff0c;英文名称BOLL&#xff0c;是John Bollinger在上世纪八十年代创建的&#xff0c;由中轨、上轨、下轨三条线组成。 一、布林线计算公式详解 布林线中轨是简单移动平均线&#xff0c;一般软件上自带的布林带中轨是20日均线&#xff0c;上轨是中轨加上2个标准差…...

模糊的照片能修复吗?

用照片记录生活&#xff0c;虽然不一定拍得好&#xff0c;但这也是生活应该有的样子。而我们拍得不好&#xff0c;常见就是拍出了模糊的照片&#xff0c;这可能是因为没有对焦或者是手抖了一下&#xff0c;就成了模糊的照片。更多时候未能及时发现&#xff0c;等到想分享一下才…...

【Java|多线程与高并发】详解start()方法和run()方法的区别

文章目录前言1.start()方法和run()方法2.不能两次调用start()方法3.线程的执行是随机的start()方法和run()方法的执行顺序不一定相同4.run()方法由JVM调用public Thread(Runnable target)中的target前言 本篇文章主要讲解以下几个问题: start()方法和run()方法的区别与联系为…...

mysql 一些有意思的sql语句,备忘

### 批量插入 INSERT INTO 表名 &#xff08;字段列表&#xff09; VALUES &#xff08;字段对应的值&#xff09;,&#xff08;字段对应的值&#xff09;,&#xff08;字段对应的值&#xff09;,&#xff08;字段对应的值&#xff09;, js 代码示例: function batchAddOrde…...

hive自定义函数

hive自定义函数 hive内置的函数满足不了所有的业务需求&#xff0c;可以考虑自己定义函数 UDF&#xff1a;一对一输出(upper) UDTF&#xff1a;一对多输出 (lateral view explode) UDAF&#xff1a;多对一输出(count, max, min) 自定义UDF 用java实现一个UDF 引入依赖 …...

数仓理论【范式】【维度建模】

数仓理论 1 范式理论 1.1 范式概念 数据建模要遵循一定的规则&#xff0c;在关系建模中&#xff0c;这种规则就是范式 采用范式结构&#xff0c;可以有效的降低数据的冗余性 范式在获取数据时&#xff0c;需要通过join拼接出数据 范式有第一范式(1NF)&#xff0c;第二范式…...

卷积神经网络

卷积神经网络1. 卷积神经网络边缘检测示例Padding卷积步长三维卷积单层卷积网络简单卷积网络示例池化层卷积神经网络示例2. 深度卷积网络经典网络残差网络残差网络为什么有用1 x 1 卷积谷歌Inception 网络介绍Inception 网络迁移学习数据扩充&#xff08;数据增强&#xff09;3…...

解决Qt提示xxx.so not found( using -rpath or -rpath-link)问题

问题描述: 在QtCreator中交叉编译的时候突然出现了以下动态库找不到的问题: 我这里是aarch64,其他环境类似即可。 /usr/lib/gcc-cross/aarch64-linux-gnu/7/../../../../aarch64-linux-gnu/bin/ld: warning: libwrap.so.0, needed by /home.../../nfsdir///libpulsecommo…...

i深圳网站建设/营销型网站的公司

p9 svn配置多仓库与权限控制...

专业网站建设模板下载/什么软件可以推广自己的产品

给出凸包的定义&#xff1a; 简要说一下思路&#xff1a; 首先将所有点按照x从小到大&#xff08;x同则y从小到大&#xff09;排序 把p1,p2放入凸包&#xff0c;从p3开始&#xff0c;当新点在凸包‘前进’方向的左边时继续&#xff0c;否则依次删除最近加入凸包的点&#xff0c…...

南城网站优化公司/石家庄seo排名外包

描述 查找和排序题目&#xff1a;输入任意&#xff08;用户&#xff0c;成绩&#xff09;序列&#xff0c;可以获得成绩从高到低或从低到高的排列,相同成绩 都按先录入排列在前的规则处理。例示&#xff1a; jack 70 peter 96 Tom 70 smith 67从高到低 成绩…...

wordpress弹出聊天/360上网安全导航

FPGA开发概括 FPGA的开发流程主要分为两部分(不考虑仿真)&#xff0c;.v文件的编写和.xdc文件的编写&#xff0c;前者为程序文件后者为管脚约束文件。 程序文件 程序文件里实现的功能为每一秒实现两个led的亮灭变化&#xff0c;产生跑马灯的效果。 代码如下&#xff0c;注释…...

深圳有做网站公司/cba最新消息

# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候&#xff0c;必须要带上单位&#xff0c;# 通常的格式就是 1k 5gb 4m 等酱紫&#xff1a;## 1k > 1000 bytes# 1kb > 1024 bytes# 1m > 1000000 bytes# 1mb > 1024*1024 bytes# 1g > 10000000…...

wordpress语言翻译/怎样在百度上发帖子

最近接手一个服务器&#xff0c;不过是Windows系统的&#xff0c;运行程序时候总是出一些问题。有点怀疑是系统的问题&#xff1f;于是决定从windows迁移到Linux系统里面去。不过遇到了一个大坑&#xff01;&#xff01;&#xff01;&#xff01;安装过程非常简单&#xff0c;就…...