Vue3中的defineExpose的认识

文章目录

    • defineExpose
    • 子组件
    • 父组件:
    • 总结:

defineExpose

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,** 不会 **暴露任何在 <script setup> 中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性:

<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)defineExpose({a,b
})
</script>

demo案例:
写一个子组件,里面有一个message和add方法,然后再父组件中展示message和调用add的方法,代码如下:

子组件

<template>
<div class='content'><h1>{{count}}</h1>
</div>
</template><script setup >
import { ref } from 'vue'const count = ref(0)const message = ref('Hello from Child!')const add = () => {count.value++}defineExpose({message,add})
</script>

父组件:

<template><div class='content'><h1>{{ parentData }}</h1><Child ref="child" /><button @click="$refs.child.add()">父级按钮</button></div>
</template><script setup>
import Child from './Child.vue'
import { ref, onMounted } from 'vue'
const child = ref(null)
const parentData = ref('This is the parent data')
onMounted(() => {parentData.value = child.value.message
})
</script>

点击按钮2下,在父组件页面展示的效果:

在这里插入图片描述

总结:

defineExpose 用于在 <script setup> 中显式暴露组件内部状态和方法
父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
使用 defineExpose 可以让组件更加模块化和可控,只有显式暴露的部分才能被外部访问,增强了封装性和安全性
这个功能在组件之间需要进行复杂交互时特别有用,尤其是在大型项目中,能够显著提升代码的可读性和可维护性

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

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

相关文章

OpenCV几何图像变换(10)透视变换函数warpPerspective()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 warpPerspective 函数使用指定的矩阵对源图像进行透视变换&#xff1a; dst ( x , y ) src ( M 11 x M 12 y M 13 M 31 x M 32 y M 33 , M…

算法练习题04:连续子字符串出现的次数

题目描述 在2021年11月6日&#xff0c;中国战队EDG&#xff08;Edward Gaming&#xff09;在冰岛雷克雅未克举行的《英雄联盟》全球总决赛中&#xff0c;击败了韩国战队DK&#xff08;DWG KIA&#xff09;&#xff0c;首次捧起召唤师杯。 虽然两支队伍在比赛中表现都很出色&a…

Spring Boot应用中集成与使用多数据源

Spring Boot应用中集成与使用多数据源 1. 前言 通过定义和使用多个数据源&#xff0c;能在Spring Boot应用中实现更复杂的数据管理场景&#xff0c;比如读写分离、数据冗余等。 2. 准备工作 环境准备&#xff1a;确保已经准备好Spring Boot的开发环境。数据库准备&#xff…

mlp学习

MLP是Multi-Layer Perceptron的缩写&#xff0c;中文通常翻译为“多层感知器”。它是一种前馈神经网络&#xff0c;由多个神经元层组成&#xff0c;包括一个输入层、多个隐藏层和一个输出层。MLP是深度学习的基础&#xff0c;广泛应用于各种机器学习和人工智能任务中。 MLP的主…

必备工具:2024四大视频压缩神器推荐!

随着视频质量的不断提高&#xff0c;文件大小也变得越来越大&#xff0c;这给存储和分享带来了不小的挑战。今天&#xff0c;我们就来一起探索几款优秀的视频压缩工具&#xff01; 福昕视频压缩大师 直达链接&#xff1a;www.foxitsoftware.cn/shipinyasuo/ 福昕视频压缩大师…

两个月冲刺软考——SQL基础:排序、分组和聚合函数的实用指南

1.涉及到的部分基本语法 1.1 ORDER BY 与 GROUP BY ORDER BY用于对查询结果进行排序&#xff1b;默认是升序&#xff08;ASC&#xff09;&#xff0c;可以指定降序&#xff08;DESC&#xff09;。 GROUP BY用于将数据按照一个或多个列进行分组&#xff1b;通常与聚合函数&am…

将每一列的每 3 行的格值拼进一个格子

某 csv 文件的第 3 列是特殊的字符串&#xff1a;两端有引号&#xff0c;被拆分为多行&#xff08;相当于用回车分隔&#xff09;。 id,name,description,age 23,Anna,"Self-made Chef Shoemaker",23 1,Lily,"One Way go far",24 2,Joe,"Go aHead&quo…

element input限制输入框只能输入数字

element input输入框只能输入数字 <el-input v-model"value" onkeypress"return( /[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input>限制不能输入中文 <el-input input"formData.stationCode formData.stationCode.r…

长视频平台:谁都想成为「爆款制造机」

【潮汐商业评论/ 原创】 “今晚下班回家&#xff0c;我要先追优酷更新的《边水往事》&#xff0c;再补爱奇艺的《九部检察官》&#xff0c;还有腾讯视频新上线的脱口秀……”对于Chloe来说&#xff0c;没有什么比下班回家看剧更放松的。 “为了追这些剧&#xff0c;我最近把优…

数据结构(一)——顺序表和单向链表(一对一)

数据结构&#xff1a; 1.衡量一个程序是否优秀&#xff1a; 1.时间复杂度&#xff1a; 数据量增长与程序运行时间的比例关系以函数描述称为时间渐进复杂度函数,简称时间复杂度 O(c) > O(logn) > O(n) > O(nlogn) > O(n^2) > O(n^3) > O…

c++与c的比较

C 概述 编程范式&#xff1a;探索不同程序设计方法学 在编程领域&#xff0c;不同的语言和方法学支持着不同的编程范式&#xff0c;这些范式指导我们如何分析、设计和实现程序。主要的编程范式包括&#xff1a; 面向过程&#xff1a;以函数为核心&#xff0c;通过函数来处理数…

大数据技术之HBase 快速入门(2)

目录 HBase 安装部署 Zookeeper 正常部署 Hadoop 正常部署 HBase 的解压 HBase 的配置文件 HBase 远程发送到其他集群 HBase 服务的启动 查看 HBase 页面 高可用&#xff08;可选&#xff09; HBase Shell 操作 基本操作 Namespace DDL DML HBase 安装部署 Zookeeper 正常部署 …

苹果秋季发布会前瞻:iPhone 16领衔新品盛宴

苹果定档9月9日&#xff0c;揭开新品神秘面纱 苹果公司近日正式宣布&#xff0c;将于9月9日在加州库比蒂诺的Apple Park&#xff0c;史蒂夫乔布斯剧院举办年度秋季新品发布会&#xff0c;主题为“It’s Glowtime”&#xff0c;预示着Siri界面将迎来一场华丽变身。此次发布会较原…

米壳AI:发现一个可以保存国内外视频的宝藏网站!

&#x1f388;嘿&#xff0c;朋友们&#xff01;今天我要给大家分享一个超级棒的发现 —— 一个可以下载国内外视频的网站&#xff01;&#x1f389; 在这个信息爆炸的时代&#xff0c;我们总是渴望能够随时随地欣赏到精彩的视频内容。 无论是国内的热门影视剧、搞笑短视频&am…

Docmatix - 超大文档视觉问答数据集

本文&#xff0c;我们将发布Docmatix - 一个超大的文档视觉问答 (DocVQA) 数据集&#xff0c;比之前的数据集大 100 倍。当使用 Docmatix 微调 Florence-2 时&#xff0c;消融实验显示 DocVQA 任务的性能提高了 20%。 Docmatix - 一个超大的文档视觉问答 (DocVQA) 数据集https:…

虚幻5|按键触发学习

一&#xff0c;如图参考 1.下移 驱动阈值 越大按时间长才会触发&#xff0c;越小很快就可以触发 2.按下 当按下超出驱动阈值大小就会触发一次&#xff0c;这里的驱动阈值只能设置再0.1~1的大小 3.已松开 当按下的时候&#xff0c;先触发单次的started&#xff0c;如果按压…

C语言的发展历程:从诞生到现代编程的基石

C语言作为一种通用编程语言&#xff0c;在计算机科学的发展中占据了重要的地位。自20世纪70年代问世以来&#xff0c;C语言凭借其简洁、高效、灵活等特点&#xff0c;成为系统软件、操作系统、嵌入式系统及应用软件开发的重要工具。本文将带您回顾C语言的发展历程&#xff0c;从…

广播语义学许多PyTorch操作支持NumPy的广播语义。python编程 人工智能 神经网络

广播语义学 许多PyTorch操作支持NumPy的广播语义。看见https://numpy.org/doc/stable/user/basics.broadcasting.html详情请见。 简而言之&#xff0c;如果PyTorch操作支持广播&#xff0c;那么它的张量参数可以自动扩展为相同的大小(无需复制数据)。 普通语义学 如果下列规…

#QT 笔记一

重点&#xff1a;面试考试大概率涉及&#xff0c;需要不借助任何资料掌握。掌握&#xff1a;面试考试可能涉及&#xff0c;需要不借助任何资料掌握。熟悉&#xff1a;面试考试可能涉及&#xff0c;可以稍微参考资料掌握。了解&#xff1a;面试考试小概率涉及&#xff0c;面试拔…

本地缓存Caffeine框架的学习笔记

Caffeine是一个高性能的Java本地缓存框架&#xff0c;它采用了W-TinyLFU算法&#xff0c;结合了LRU和LFU算法的优点&#xff0c;实现了缓存高命中率和内存低消耗。Caffeine的设计理念是尽可能地高效&#xff0c;它通过一些巧妙的算法&#xff0c;确保最常访问的数据始终可用&am…