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

vue3 | defineExpose的使用

简介

使用<script setup>的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例,不会暴露在任何在<script setup>中声明的绑定

换句话说,如果一个子组件使用的是选项式 API 或没有使用 <script setup>,被引用的组件实例和该子组件的 this 完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问权。

但是如果使用了 <script setup> 的组件,这种组件是默认私有的,也就是一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西,除非子组件在其中通过 defineExpose 宏显式暴露:

<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({a,b
})
</script>

举个栗子

父组件获取子组件的实例,去触发子组件实例身上的方法。

defineExpose-demo.gif

父组件

<template>
<div class="p-20 pb-0 mb-4"><div>父组件</div><button class="mt-4" @click="handleClick">点我聚焦</button>
</div>
<Child ref="childeRef"></Child>
</template><script setup lang="ts">
import { ref, provide, onMounted } from "vue";
import Child from "./Child.vue";const childeRef = ref<HTMLInputElement | null>(null);const handleClick = () => {childeRef.value?.inputRef?.focus();
};
</script>

子组件

<template><hr /><div class="p-20 pt-4"><div>子组件</div><inputref="inputRef"placeholder="请输入哈哈哈哈"class="border-1 mt-4"/><br /></div>
</template><script setup lang="ts">
import { ref } from "vue";const inputRef = ref<HTMLInputElement | null>(null);defineExpose({inputRef,
});
</script>

参考文档:

  • https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
  • https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component

相关文章:

vue3 | defineExpose的使用

简介 使用<script setup>的组件是默认关闭的————即通过模板引用或者$parent链获取到的组件的公开实例&#xff0c;不会暴露在任何在<script setup>中声明的绑定 换句话说&#xff0c;如果一个子组件使用的是选项式 API 或没有使用 <script setup>&…...

PaddleSeg学习3——使用PP-LiteSeg模型对道路进行分割

使用PP-LiteSeg模型对道路进行分割 1 准备环境2 样本3 准备config文件4 模型训练5 模型预测5.1 python预测5.2 C++预测5.3 预测结果展示1 准备环境 参考上一篇:Windows PaddleSeg c++部署 2 样本 车道线分割实战的智能车数据集 #标签 背景:0, 0.05 单实线-黄...

时序数据库的关键技术点总结

总结时序数据库的关键技术点 内存 SQL解析LSM Tree&#xff08;WAL&#xff09;skiplist内存合并&#xff0c;有序落盘LRU 时序文件索引缓存 存储层 时间分区设备分区 索引文件 时间戳范围索引布隆过滤器索引brin 索引btree 索引多层索引 数据文件&#xff08;tskv&#xf…...

【ROS】机器人使用Nomachine进行远程控制

官网&#xff1a;NoMachine - Free Remote Desktop for Everybody 支持的系统&#xff1a; WindowsMacLinux 树莓派其他ARM板IOSAndroid 由于网速问题&#xff0c;可以使用我下载好的&#xff1a;&#xff08;8.8.1_1&#xff09; 链接&#xff1a;https://pan.baidu.com/s/…...

Jmeter系列-定时器Timers的基本介绍(11)

简介 JMeter中的定时器&#xff08;Timer&#xff09;是一种重要的元件&#xff0c;用于模拟用户在不同时间间隔内发送请求的场景。通过使用定时器&#xff0c;可以模拟负载、并发和容量等不同情况下的请求发送频率。 使用定时器 可以在取样器下添加定时器&#xff0c;这样定…...

【华为OD机试python】求满足条件的最长子串的长度【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个字符串,只包含字母和数字,按要求找出字符串中的最长(连续)子串的长度, 字符串本身是其最长的子串,子串要求: 1、 只包含1个字母(a~z, A~Z),其余必须是数字; 2、 字母可以…...

iOS技术博主指南:填写苹果应用上架中的隐私政策信息

摘要&#xff1a;本文将详细介绍iOS技术博主在苹果应用上架过程中如何填写隐私政策信息。博主可以通过App Store Connect为应用程序提供隐私政策网址和用户隐私选项网址&#xff0c;并了解如何填写隐私政策文本。本文将提供步骤和注意事项&#xff0c;帮助博主顺利完成隐私政策…...

Spring事件机制之ApplicationEvent

博主介绍&#xff1a;✌全网粉丝4W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…...

【操作系统笔记】内存寻址

物理寻址 主存&#xff08;内存&#xff09; 计算机主存也可以称为物理内存&#xff0c;内存可以看成由若干个连续字节大小的单元组成的数组每个字节都有一个唯一的物理地址&#xff08;Physical Address&#xff09;CPU访问内存前&#xff0c;先拿到内存地址&#xff0c;然后…...

webpack自定义loader解析指定后缀名文件

案例&#xff1a; webpack自定义loader解析.chenjiang后缀名的文件 整体目录&#xff1a; chenjiangLoader.js文件代码 // 正则匹配script标签中的内容 const REG /<script>([\s\S]*)<\/script>/;module.exports function (source) {const __source source.…...

基于Kintex UltraScale系列FPGA KU060/KU115高性能PCIe数据预处理载板(5GByte/s带宽)

PCIE702是一款基于PCIE总线架构的高性能数据预处理FMC载板&#xff0c;板卡具有1个FMC&#xff08;HPC&#xff09;接口&#xff0c;1路PCIe x8主机接口、1个RJ45千兆以太网口、2个QSFP 40G光纤接口。板卡采用Xilinx的高性能Kintex UltraScale系列FPGA作为实时处理器&#xff0…...

Cesium 地球(2)-瓦片创建

Cesium 地球(2)-瓦片创建 QuadtreePrimitive代码执行4个步骤: step1: update()step2: beginFrame()step3: render()step4: endFrame() 但并不是瓦片的创建步骤。 1、创建 QuadtreeTile 基于 step3: render() step3: render()┖ selectTilesForRendering()在 selectTilesFo…...

Selenium-介绍下其他骚操作

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…...

【C++从0到王者】第三十一站:map与set

文章目录 一、关联式容器二、pair键值对三、set1. set的介绍2. set的部分接口以及应用3. count4. lower_bound和upper_bound5. equal_range6. multiset容器 四、map1. map的介绍2. map的一些常见接口以及使用3. map的[]运算符重载4. 使用map改进一些题5. multimap容器 五、map和…...

生产消费者模型的介绍以及其的模拟实现

目录 生产者消费者模型的概念 生产者消费者模型的特点 基于阻塞队列BlockingQueue的生产者消费者模型 对基于阻塞队列BlockingQueue的生产者消费者模型的模拟实现 ConProd.c文件的整体代码 BlockQueue.h文件的整体代码 对【基于阻塞队列BlockingQueue的生产者消费者模型…...

Unity ML-Agents默认接口参数含义

下面的含义就是训练中常用的yaml文件&#xff1a; behaviors:waffle:trainer_type: ppo #训练器类型&#xff0c;默认ppo。还有sac和pocahyperparameters:batch_size: 64 # 梯度下降每次迭代的经验数。应确保该值总是比 buffer_size小几倍。 在使用连续动作的情况下&#x…...

【python数据分析基础】—pandas中loc()与iloc()的介绍与区别

文章目录 前言一、loc[]函数二、iloc[]函数三、详细用法loc方法iloc方法 总结共同点不同点 前言 我们经常在寻找数据的某行或者某列的时常用到Pandas中的两种方法iloc和loc&#xff0c;两种方法都接收两个参数&#xff0c;第一个参数是行的范围&#xff0c;第二个参数是列的范…...

ad18学习笔记十一:显示和隐藏网络、铺铜

如何显示和隐藏网络&#xff1f; Altium Designer--如何快速查看PCB网络布线_ad原理图查看某一网络的走线_辉_0527的博客-CSDN博客 AD19(Altium Designer)如何显示和隐藏网络 如何显示和隐藏铺铜&#xff1f; Altium Designer 20在PCB中显示或隐藏每层铺铜-百度经验 AD打开与…...

全国职业技能大赛云计算--高职组赛题卷④(私有云)

全国职业技能大赛云计算--高职组赛题卷④&#xff08;私有云&#xff09; 第一场次题目&#xff1a;OpenStack平台部署与运维任务1 基础运维任务&#xff08;5分&#xff09;任务3 OpenStack云平台运维&#xff08;15分&#xff09;任务4 OpenStack云平台运维开发&#xff08;1…...

Camera Tunning ISP 模块面试总结

一.ISP的调试流程概述&#xff1a; 在ISP调试流程中&#xff0c;我们首先需要确认以下三个方面&#xff1a;项目需求、硬件问题确认和Sensor驱动配置确认。 项目需求方面&#xff0c;即Sensor需要出多大的分辨率去调效果&#xff1b;因为有些芯片有最大分辨率支持的限制&#x…...

AOSP源码中Android.mk文件中的反斜杠符号(\)的作用和使用

简介 在AOSP&#xff08;Android Open Source Project&#xff09;源码中的Android.mk文件中&#xff0c;反斜杠符号&#xff08;\&#xff09;的主要作用是将一行代码拆分成多行&#xff0c;以提高可读性并帮助组织较长的代码块。这对于定义复杂的构建规则和变量时特别有用。…...

如何查看mysql的存储引擎

要查看MySQL中的存储引擎&#xff0c;可以使用以下两种方法&#xff1a; 1. 使用 SQL 查询&#xff1a; 您可以使用SQL查询来查看MySQL中的存储引擎。打开MySQL客户端&#xff0c;并连接到您的MySQL服务器&#xff0c;然后运行以下SQL查询&#xff1a; SHOW TABLE STATUS;这…...

FPGA project : dht11 温湿度传感器

没有硬件&#xff0c;过几天上板测试。 module dht11(input wire sys_clk ,input wire sys_rst_n ,input wire key ,inout wire dht11 ,output wire ds ,output wire …...

std::string和QString的区别以及互转

一 区别 1.字符编码支持 std::string&#xff1a;默认情况下&#xff0c;使用 ASCII 或 UTF-8 编码。不直接提供对多字节字符的内置支持。 QString&#xff1a;提供对多种字符编码的支持&#xff0c;包括 ASCII、UTF-8、UTF-16 等。它更适合处理国际化和本地化的字符串。 2.…...

python+vue理发店管理系统

理发店管理系统主要实现角色有管理员和会员,管理员在后台管理用户表模块、token表模块、收藏表模块、商品分类模块、热卖商品模块、活动公告模块、留言反馈模块、理发师模块、会员卡模块、会员充值模块、会员模块、服务预约模块、服务项目模块、服务类别模块、热卖商品评论表模…...

基于微信小程序的个人健康管理系统的设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…...

共聚焦显微镜在化学机械抛光课题研究中的应用

两个物体表面相互接触即会产生相互作用力&#xff0c;研究具有相对运动的相互作用表面间的摩擦、润滑与磨损及其三者之间关系即为摩擦学&#xff0c;目前摩擦学已涵盖了化学机械抛光、生物摩擦、流体摩擦等多个细分研究方向&#xff0c;其研究的数值量级也涵盖了亚纳米到百微米…...

本地Linux 部署 Dashy 并远程访问

文章目录 简介1. 安装Dashy2. 安装cpolar3.配置公网访问地址4. 固定域名访问 转载自cpolar极点云文章&#xff1a;本地Linux 部署 Dashy 并远程访问 简介 Dashy 是一个开源的自托管的导航页配置服务&#xff0c;具有易于使用的可视化编辑器、状态检查、小工具和主题等功能。你…...

互联网摸鱼日报(2023-09-18)

互联网摸鱼日报(2023-09-18) 36氪新闻 最前线 | 号外电摩12.68万元起订&#xff0c;配16.9度一体压铸电池包 本周双碳大事&#xff1a;CCER交易管理办法获生态环境部原则通过&#xff1b;明阳斥资100亿元加码光伏项目&#xff1b;“全路程”获2亿元D轮融资 200亿&#xff0c…...

Kotlin中函数的基本用法以及函数类型

函数的基本用法 1、函数的基本格式 2、函数的缺省值 可以为函数设置指定的初始值&#xff0c;而不必要传入值 private fun fix(name: String,age: Int 2){println(name age) }fun main(args: Array<String>) {fix("张三") }输出结果为&#xff1a;张三2 …...

nas做网站服务器/今天发生的重大新闻

写在前面 官方文档地址 ES 的查询语言称为 DSL 即 Domain Specific Language 领域专用语言。 本文查询将以下列索引结构为例子展开。 PUT /dying_gq_bookstore {"mappings": {"properties": {"book_id": {"type": "long"…...

网站建设与规划方案书/站长平台工具

2015年3月28日&#xff0c;在人来人往的北京中关村创业大街上的极客咖啡&#xff0c;近百位过去8年和InfoQ中国一同成长的朋友齐聚一堂&#xff0c;共同庆祝InfoQ中国&#xff08;微信号&#xff1a;infoqchina&#xff09;的八周年生日。\u0026#xD;\u0026#xD;时间回到2006年&a…...

浦城 做网站/企业全网推广公司

css 伪类是用于向某些选择器添加特殊的效果&#xff0c;是动态的&#xff0c;指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时&#xff0c;它可能得到一个伪类的样式&#xff1b;当状态改变时&#xff0c;它又会失去这个样式。这篇文章在一定程度上鼓励你在构建…...

北京市住房和建设委员会网站/东莞营销网站建设

http://pengranxiang.iteye.com/blog/848862 首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接。事实上 Tomcat 本身已经提供了 HTTP 服务&#xff0c;该服务默认的端口是 8080&#xff0c;装好 tomcat 后通过 8080 端口可以直接使用 Tomcat 所运行的应用程序&…...

做淘宝类网站的步骤/站长统计app网站

百钱买百鸡的问题算是一套非常经典的不定方程的问题&#xff0c;题目很简单&#xff1a;公鸡5文钱一只&#xff0c;母鸡3文钱一只&#xff0c;小鸡3只一文钱&#xff0c; 用100文钱买一百只鸡,其中公鸡&#xff0c;母鸡&#xff0c;小鸡都必须要有&#xff0c;问公鸡&#xff0…...

做民宿最大的网站/seo优化教学视频

1. 最简单的方法是用base64: import base64 s1 base64.encodestring(hello world) s2 base64.decodestring(s1) print s1,s2 # aGVsbG8gd29ybGQ\n # hello world Note: 这是最简单的方法了&#xff0c;但是不够保险&#xff0c;因为如果别人拿到你的密文&#xff0c;也可以自…...