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

news2024/11/23 8:43:31

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

示例效果

在这里插入图片描述

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

父组件代码:

<template>
  <div>
    <div 

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

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

相关文章

查看监控提示码流已加密,请切换至本地配置页面设置密钥后重启预览

环境&#xff1a; 硬盘录像机DS-8632N-I16 谷歌浏览器 问题描述&#xff1a; 查看监控提示码流已加密,请切换至本地配置页面设置密钥后重启预览 解决方案&#xff1a; 1.进入系统-安全管理-安全服务&#xff0c;关闭启用码流加密&#xff0c;保存 2.进入网络-高级配置-平…

AI:73-结合语法知识的神经机器翻译研究

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌在这个漫长的过程,中途遇到了不少问题,但是…

Docker - 安装

Docker安装 Docker的基本组成 镜像&#xff08;image&#xff09;: ​ Docker镜像就好比是一个模板&#xff0c;可以通过这个模板来创建容器服务&#xff0c;tomcat镜像 -> run -> tomcat01容器&#xff08;提供服务器&#xff09;&#xff0c;通过这个镜像可以创建多个…

【VUE+ elementUI 实现动态表头渲染】

VUE elementUI 实现动态表头渲染 1、定义 columns&#xff08;表头数据&#xff09; 和 dataList&#xff08;表格数据&#xff09; data() {return {loading: false,dataList: [{ name: 张三, sex: 男, age: 18 },{ name: 林琳, sex: 女, age: 20 },{ name: 王五, sex: 男, …

安卓开发实例:高德地图

想要在app里面显示高德地图&#xff0c;遇到了很多问题&#xff0c;开始想显示百度地图的&#xff0c;个人感觉不喜欢百度地图&#xff0c;跟高德地图有缘&#xff0c;所以就弄个高德地图。 当然你可以直接看开发文档啊&#xff0c;慢走不送&#xff0c;谢谢。 https://lbs.ama…

记一次前后端分离项目跨域导致的set-cookie失效问题解决方案

起因公司项目使用了springsecurity的基础登录进行认证授权&#xff0c;而基础登录使用的是sessioncookie的形式&#xff0c;项目前后端分离&#xff0c;前端调接口的时候就会出现&#xff0c;登陆后点击其他页面&#xff0c;提示未登录跳转登录页的情况&#xff0c;排查了一下问…

小程序开发平台源码系统 各种类型小程序任由选择 带完整的搭建教程

近年来随着微信、支付宝等平台对小程序的大力推广和支持下应运而生的。小程序作为一种轻量级的应用程序&#xff0c;为用户提供了无需下载安装、即用即走的便捷体验&#xff0c;因此得到了广大用户的喜爱和青睐。所以今天罗峰来给大家介绍一款小程序开发平台源码系统&#xff0…

Qt 子窗口不设置parent时,如何随主窗口关闭

遇到个情况&#xff0c;new一个子窗口的时候&#xff0c;如果指定了parent&#xff0c;那在最小化这个子窗口时这个子窗口并不是在缩小到任务栏&#xff0c;而是在任务栏的左上角。像这种&#xff1a; 并且&#xff0c;点击主窗口之后&#xff0c;子窗口也始终显示在主窗口之前…

开源论道 源聚一堂@COSCon

自2015年以来&#xff0c;开源高峰论坛一直是中国开源年会中的传统亮点项目。本次在COSCon23 大会期间的高峰圆桌会&#xff0c;于2023年10月29日在成都高新区的菁蓉汇召开。 本次高峰圆桌上&#xff0c;我们特别邀请了20 位来自企业&#xff0c;基金会和社区的专家和领袖参加讨…

OpenAI震撼技术圈!0代码构建Assistants API,技术原理探秘

&#x1f449;导读 OpenAI 发布会带来了全新的开发方式——Assistants API&#xff0c;这背后基于的正是你可能闻所未闻的 AI Agent 智能体技术。本篇文章将为你全面解析 AI Agent 的概念、技术框架与应用场景。长文干货&#xff0c;先码再看&#xff01; &#x1f449;目录 1 …

lsky Pci-go nas个人图床搭建

①安装PicGo 应用 http://192.168.50.249:18189/api/v1 上传电脑需要有node 和 npm环境&#xff0c;官网下载最新安装板node后&#xff0c;自动会配置npm环境。 ②安装 Lsky-Uploader 获取token&#xff1a; http://www.metools.info/code/post278.html 服务器域名为 Lsky p…

【Python自学笔记】python os.getcwd文件目录找不对

写小组项目的时候需要按照路径读入数据表&#xff0c;数据库和图片列表显示到html&#xff0c;按ChatGPT的答案写了python os.getcwd()&#xff0c;结果迁移到同组同学的电脑上总是报错。 经过一番查询&#xff0c;在CSDN上发现一个完美解决问题的好帖&#xff0c;特此存下链接…

UserAgent使用隧道HTTP代码示例

首先&#xff0c;我们需要安装一个Perl模块来处理HTTP请求&#xff0c;然后&#xff0c;我们需要配置代理信息&#xff0c;如proxy_host和proxy_port。接下来&#xff0c;我们可以使用正则表达式来解析网页内容并提取我们需要的信息。最后&#xff0c;我们可以将这些信息存储到…

Qt实现自定义多选下拉列表

目录 前言1、 功能描述2、代码实现总结 前言 本文记录了一种通过继承 QComboBox 实现下拉列表多选功能的方法。效果如下图所示&#xff1a; 1、 功能描述 普通的下拉列表只支持选择一个选项&#xff0c;在软件开发过程中&#xff0c;经常会遇到下拉列表支持选择多个选项的需…

【脑机接口 算法】EEGNet: 通用神经网络应用于脑电信号

EEGNet: 神经网络应用于脑电信号 中文题目论文下载&#xff1a;算法程序下载&#xff1a;摘要1 项目介绍2 EEGNet网络原理2.1EEGNet原理架构2.2FBCCA 算法2.3自适应FBCCA算法 3EEGNet网络实现4结果 中文题目 论文下载&#xff1a; DOI: 算法程序下载&#xff1a; 地址 摘要…

若依框架维护问题

1.设置table高度 2.处理弹出框遮罩层 < el-dialog :title“title” custom-class“custom_drawer_class” :visible.sync“visible” size“50%” append-to-body> </ el-dialog>

《网络协议》03. 传输层(TCP UDP)

title: 《网络协议》03. 传输层&#xff08;TCP & UDP&#xff09; date: 2022-09-04 22:37:11 updated: 2023-11-08 15:58:52 categories: 学习记录&#xff1a;网络协议 excerpt: 传输层、UDP、TCP&#xff08;可靠传输&#xff0c;流量控制&#xff0c;拥塞控制&#xf…

从内存优化视角再看 Glide 图片加载库

前置背景 Glide 作为常用的图片加载框架&#xff0c;框架层面已经对内存方面有不少优化&#xff0c;但作为一个图片框架&#xff0c;确保正确性一定是第一位的&#xff0c;因此在应用层还可以在适当的场景做一些额外的优化&#xff0c;当然你需要了解优化设置可能产生的问题。…

【2021研电赛】基于深度学习的蛋白质与化合物结合性质预测

本作品介绍参与极术社区的有奖征集|分享研电赛作品扩大影响力&#xff0c;更有重磅电子产品免费领取! 获奖情况&#xff1a;三等奖 1.作品简介 针对药物发现过程中的药物筛选问题&#xff0c;本设计基于深度学习提出新的神经网络结构和数据处理方式用于预测蛋白质与化合物之…

【C++】:内存管理:C++内存分布 || C++中动态内存管理(new || delete)

&#x1f4ed;1. C/C内存分布 【说明】 &#x1f0cf;1. 栈又叫堆栈–非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的 &#x1f0cf;2. 内存映射段是高效的I/O映射方式&#xff0c;用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存&#xff…