vue3+ts通过ref访问组件里面的方法及属性

vue3+ts通过ref访问组件里面的方法及属性

之前访问不到主要是子组件没有往外暴露要访问的接口子组件使用了 script setup的组件是默认私有的:一个父组件无法访问到一个使用了 script setup的子组件中的任何东西,:
除非子组件在其中通过 defineExpose方法 宏显式暴露
子组件

<template><a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"title="Basic Drawer" placement="right"></a-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
const showDrawer = () => {open.value = true;
};
defineExpose({showDrawer
})
</script>

父组件

 <ApiModel ref="refApiModel"/>
import ApiModel from "./components/ApiModel.vue"
const refApiModel:any=ref(null)
const actionApiRecord=(type:string,record:any)=>{switch(type){case 'add':refApiModel.value?.showDrawer()break;}
}

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

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

相关文章

正则表达式 详解,10分钟学会

大家好&#xff0c;欢迎来到停止重构的频道。 本期我们讨论正则表达式。 正则表达式是一种用于匹配和操作文本的工具&#xff0c;常用于文本查找、文本替换、校验文本格式等场景。 正则表达式不仅是写代码时才会使用&#xff0c;在平常使用的很多文本编辑软件&#xff0c;都…

关于Python里xlwings库对Excel表格的操作(二十五)

这篇小笔记主要记录如何【如何使用xlwings库的“Chart”类创建一个新图表】。 前面的小笔记已整理成目录&#xff0c;可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 &#xff08;1&#xff09;如何安装导入xlwings库&#xff1b; &#xff08;2…

案例分享:Qt多国语言输入法软键盘

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/135346374 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

aspose通过开始和结束位置关键词截取word另存为新文件

关键词匹配实体类&#xff1a; Data EqualsAndHashCode(callSuper false) public class TextConfig implements Serializable {private static final long serialVersionUID 1L;/*** 开始关键词&#xff0c;多个逗号分隔*/private String textStart ;/*** 结束关键词&#x…

SkyWalking部署-K8S

一、安装K8S集群 kubeadm部署K8s集群V1.19.0 二、部署skywalking 2.1.创建命名空间 kubectl create ns skywalking 2.2.给节点打标签 kubectl label node 节点名 nodetypewedesign 2.3.skywalking-oap.yml apiVersion: apps/v1 kind: Deployment metadata:name: oapnamesp…

PC端扫描小程序二维码登录

1、获取二维码地址&#xff0c;通过请求微信开发者文档中的服务端获取无限制小程序二维码URL #controller层 import org.apache.commons.codec.binary.Base64;/*** 获取小程序二维码*/PassTokenGetMapping("/getQrCode")public AjaxResult getQrCode(BlogUserDto bl…

【操作系统xv6】学习记录4 -CPU上下文:进程上下文、线程上下文、中断上下文

什么是cpu上下文 CPU 寄存器和程序计数器就是 CPU 上下文&#xff0c;因为它们都是 CPU 在运行任何任务前&#xff0c;必须的依赖环境。 什么是 CPU 上下文切换 先把前一个任务的 CPU 上下文&#xff08;也就是 CPU 寄存器和程序计数器&#xff09;保存起来&#xff0c;然后…

Flutter+Go_Router+Fluent_Ui仿阿里网盘桌面软件开发跨平台实战-买就送仿小米app开发

Flutter是谷歌公司开发的一款开源、免费的UI框架&#xff0c;可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发。 Flutter官方介绍&#xff0c;目前Flutte…

ubuntu系统没有网络图标的解决办法

参考文章:https://blog.csdn.net/qq_56922632/article/details/132309643 1. 执行关闭网络服务的命令&#xff0c;关闭网络服务sudo service NetworkManager stop2. 删除网络的状态文件sudo rm /var/lib/NetworkManager/NetworkManager.state3. 修改网络的配置文件sudo vi /etc…

冒泡排序-排序算法

前言 如果有6个人站成一排&#xff0c;要将他们按从矮到高的顺序排列。你可能有多种方式来完成。但是如果其中有一个人特别高&#xff0c;比他身边的人高&#xff0c;在队伍中特别明显&#xff0c;你可以轻易看出那个最高的需要和身边的人交换位置&#xff0c;这是冒泡排序的核…

二叉树的前序遍历 、二叉树的最大深度、平衡二叉树、二叉树遍历【LeetCode刷题日志】

目录 一、二叉树的前序遍历 方法一&#xff1a;全局变量记录节点个数 方法二&#xff1a;传址调用记录节点个数 二、二叉树的最大深度 三、平衡二叉树 四、二叉树遍历 一、二叉树的前序遍历 方法一&#xff1a;全局变量记录节点个数 计算树的节点数: 函数TreeSize用于…

案例086:基于微信小程序的影院选座系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

履机乘变,轻舟便楫:源启分布式PaaS深度赋能企业级技术平台建设

导语 源启分布式PaaS平台围绕应用视角为用户提供应用运行的全生命周期管控能力&#xff0c;提供注册中心、服务路由、网关、服务治理等中间件技术支持&#xff0c;实现应用之间的联通&#xff0c;解决客户多厂商产品不兼容、产品组合不可选择、孤岛效应等问题&#xff0c;满足…

ros2 基础学习12 分布式通信

智能机器人的功能繁多&#xff0c;全都放在一个计算机里&#xff0c;经常会遇到计算能力不够、处理出现卡顿等情况&#xff0c;如果可以将这些任务拆解&#xff0c;分配到多个计算机中运行岂不是可以减轻压力&#xff1f; 这就是分布式系统&#xff0c;可以实现多计算平台上的任…

android开发百度地图api实现定位图标随手机方向转动

该功能的实现依赖于手机中的传感器元件如陀螺仪、加速度计等&#xff0c;具体开发详见android的官方开发文档&#xff1a; 传感器概览 | Android 开发者 | Android Developershttps://developer.android.com/guide/topics/sensors/sensors_overview?hlzh-cn要自定义一个传…

Hive学习(13)lag和lead函数取偏移量

hive里面lag函数 在数据处理和分析中&#xff0c;窗口函数是一种重要的技术&#xff0c;用于在数据集中执行聚合和分析操作。Hive作为一种大数据处理框架&#xff0c;也提供了窗口函数的支持。在Hive中&#xff0c;Lag函数是一种常用的窗口函数&#xff0c;可以用于计算前一行…

《动手学深度学习》学习笔记 第6章 卷积神经网络

本系列为《动手学深度学习》学习笔记 书籍链接&#xff1a;动手学深度学习 笔记是从第四章开始&#xff0c;前面三章为基础知道&#xff0c;有需要的可以自己去看看 关于本系列笔记&#xff1a; 书里为了让读者更好的理解&#xff0c;有大篇幅的描述性的文字&#xff0c;内容很…

194.【2023年华为OD机试真题(C卷)】单行道汽车通行时间(迭代计算—JavaPythonC++JS实现)

请到本专栏顶置查阅最新的华为OD机试宝典 点击跳转到本专栏-算法之翼:华为OD机试 🚀你的旅程将在这里启航!本专栏所有题目均包含优质解题思路,高质量解题代码,详细代码讲解,助你深入学习,深度掌握! 文章目录 【2023年华为OD机试真题(C卷)】单行道汽车通行时间(…

基于SpringBoot的智慧生活商城系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的智慧生活商城系统,java…

[足式机器人]Part2 Dr. CAN学习笔记-自动控制原理Ch1-9PID控制器

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-自动控制原理Ch1-9PID控制器&#xff09; P —— Proportional I —— Integral D —— Derivative 当前误差/过去误差/误差的变化趋势 K p ⋅ e K_{\mathrm{p}}\cdot e Kp​⋅e&#xff1a;比…