11.(vue3.x+vite)组件间通信方式之ref与$parent、$children

前端技术社区总目录(订阅之前请先查看该博客)

示例效果

在这里插入图片描述

注:
(1)ref 加在标签(div等)上,是拿到dom 对象
(2)ref加上组件上,拿到的是组件的引用
(3)让父组件获取子组件的数据或者方法需要通过defineExpose对外暴露,另外让父组件获取子组件的数据或者方法需要通过defineExpose方法对外暴露。因为vue3中组件内部的数据对外“关闭的”,外部不能访问。
(4)$children在vue3已不再使用

父组件代码:

<template>
  <div>
    <div 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NIO 笔记(一)基础内容

【笔记来自&#xff1a;it白马】 NIO基础 **注意&#xff1a;**推荐完成JavaSE篇、JavaWeb篇的学习再开启这一部分的学习&#xff0c;如果在这之前完成了JVM篇&#xff0c;那么看起来就会比较轻松了。 在JavaSE的学习中&#xff0c;我们了解了如何使用IO进行数据传输&#xf…

C语言每日一题(27)链表中倒数第k个结点

牛客网 链表中倒数第k个结点 题目描述 描述 输入一个链表&#xff0c;输出该链表中倒数第k个结点。 思路分析 这是一道经典的快慢指针题&#xff0c;fast和slow最开始都指向头结点&#xff0c;对于输入值k&#xff0c;先让快指针fast先走k步&#xff0c;之后再让两个指针一…

ABAP Json和对象的转换

se24新建类ZCL_JSON保存 点击修改&#xff0c;进入下图界面&#xff0c;点击红框。 复制粘贴下面代码 CLASS zcl_json DEFINITIONPUBLICCREATE PUBLIC .PUBLIC SECTION. *"* public components of class ZCL_JSON *"* do not include other source files here!!!TYP…

某银行软件测试笔试题,满分一百你能得多少分?

&#xff08;时间90分钟&#xff0c;满分100分&#xff09; 考试要求&#xff1a;计算机相关专业试题 一、填空题&#xff08;每空1分&#xff0c;共10分&#xff09; 1. ______验证___是保证软件正确实现特定功能的一系列活动和过程。 2. 按开发阶段分&#xff0c;软件测试可…

超全总结!大模型算法面试指南(含答案)

大家好&#xff0c;从 2019 年的谷歌 T5 到 OpenAI GPT 系列&#xff0c;参数量爆炸的大模型不断涌现。可以说&#xff0c;LLMs 的研究在学界和业界都得到了很大的推进&#xff0c;尤其去年 11 月底对话大模型 ChatGPT 的出现更是引起了社会各界的广泛关注。 近些年&#xff0…

简述扫码登录原理及测试要点

扫码登录本质是解决将APP端的用户登录信息&#xff08;通常是Token&#xff09;通过扫码的形式安全稳定地同步给Web端。 操作流程&#xff1a; 打开登录页面&#xff0c;展示一个二维码(web)&#xff1b;打开APP扫描该二维码后&#xff0c;APP显示确认、取消按钮(app)&#xf…

上市公司-赫芬达尔指数(2000-2022年)(数据+2种结果)

上市公司-赫芬达尔指数&#xff08;HHI&#xff09;可衡量一个公司在市场中的相对份额或集中度。它是由每家公司在市场中份额的平方和得到的。指数值越高&#xff0c;表示该市场或行业的集中度越高&#xff0c;竞争可能相对较小&#xff1b;而指数值越低&#xff0c;则意味着该…

uni-app学习笔记(二)

目录 一、路由与页面跳转 1、tabar与普通页面跳转例子 2、navigateTo 3、switchTab 二、vue组件 1、传统vue组件的使用 2、easycom 三、uView组件库 1、安装配置 2、引入配置 3、使用 四、Vuex 1、认识 2、state基本使用 3、mapState使用 五、网络请求 1、封装…

Maven简介

一、Maven模型 二、模型实现 三、对应代码项目介绍

JAVA开源项目 于道前端项目 启动步骤参考

1. 安装 启动过程有9个步骤&#xff1a; 1.1 安装 Node JS , V18版本的 &#xff08;安装步骤省略&#xff09; 1.2 安装 npm install -g yarn &#xff0c;node JS里边好像自带npm &#xff0c;通过npm的命令安装 yarn 1.3 切换到项目中去安装&#xff0c;npm install &a…

Android Glide transform旋转rotate圆图CircleCrop,Kotlin

Android Glide transform旋转rotate圆图CircleCrop&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity import com.bumptech.glide.load…

[第二章—Spring MVC的高级技术] 2.2 置multipart解析器

使用Servlet 3.0解析multipart请求 兼容Servlet 3.0的StandardServletMultipartResolver没有构 造器参数&#xff0c;也没有要设置的属性。 这样&#xff0c;在Spring应用上下文中&#xff0c;将 其声明为bean就会非常简单&#xff0c;如下所示&#xff1a; ● 既然这个Bean方…

将Modbus转Profinet网关用于自动给料机的案例

自动给料机通过使用Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;连接1200PLC与G120变频器Modbus通信。这种通信方式可以实现设备之间的数据交换和控制命令传输&#xff0c;大大提高了自动给料机的运行效率和精度。使用这个网关&#xff0c;1200PLC可以准确地将控制…

基于pytorch使用特征图输出进行特征图可视化

使用特征图输出进行特征图可视化 文章目录 前言效果展示获取某一层特征图输出原图方法一&#xff1a;使用IntermediateLayerGetter类方法二&#xff1a;使用hook机制&#xff08;推荐&#xff09; 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例…

Linux进程控制(2)

Linux进程控制(2) &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容讲解了进程等待收尾内容和进程的程序…

爱家房产网站源码 爱家房产网商业版 微信互动营销整合+手机触屏版+经纪人分销

房产网站源码手机访问自动转手机版修改修复如下&#xff1a; 1&#xff0c;修复手机版首页标题头部名称 2&#xff0c;修复手机版首页频道导航按钮 3&#xff0c;新增手机版广告位置显示方式 4&#xff0c;修复手机版首页内容显示样式 5&#xff0c;手机版头部背景颜色ic…

【Java】在实体类中常用的注解校验

1、常用注解&#xff1a; 注解说明Null只能为nullNotNull(message “id不能为空”)必须不为null&#xff0c;可以为空字符串Min(value)必须为一个不小于指定值的数字Max(value)必须为一个不大于指定值的数字NotBlank(message “姓名不能为空”)验证注解的元素值不为空&#…

【Mysql】模糊查询

目录 表&#xff1a; like用法 1.查询姓孙的王者荣耀英雄 ​编辑 2.查询姓孙&#xff0c;且名后面只有一个字的王者荣耀英雄 3.查询姓孙&#xff0c;且名后面有两个字的王者荣耀英雄 4.查询名字带 亮 的王者荣耀英雄 ​编辑 where...in...用法 1.查询id 为1&#x…

坐标系转换(仅作记载)

一.极坐标转换为普通坐标系 参考&#xff1a;极坐标方程与直角坐标方程的互化 - 知乎 (zhihu.com) 公式&#xff1a;&#xff08;无需考虑象限引起的正负问题&#xff09; 普通坐标系转换为极坐标系 参考&#xff1a; 极坐标怎么与直角坐标系相互转化&#xff1f; - 知乎 (zh…