详细分析Vue3中的defineExpose(附Demo)

目录

  • 前言
  • 1. 基本知识
  • 2. Demo
  • 3. 实战

前言

其基本知识可参考官网:Vue3中的defineExpose

1. 基本知识

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数,用于在 <script setup> 语法下显式暴露组件的公共属性和方法

这在处理子组件时特别有用,允许父组件访问子组件的特定属性或方法

在 Vue 3 中,当我们使用 <script setup> 语法糖时,组件默认不会自动暴露内部的任何状态或方法给外部使用,为了显式暴露某些属性或方法,可以使用 defineExpose

示例Demo如下:

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

当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

2. Demo

  1. 父组件渲染子组件 Child 并通过 ref 获取子组件的实例。
  2. 子组件中的 count 和 increment 方法通过 defineExpose 暴露出来。
  3. 当点击父组件中的 “Access Child Methods” 按钮时,父组件可以访问并调用子组件的 count 和 increment

子组件:

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}// 使用 defineExpose 来暴露 count 和 increment
defineExpose({count,increment,
});
</script>

父组件:

<template><div><Child ref="childRef" /><button @click="accessChild">Access Child Methods</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';const childRef = ref(null);function accessChild() {if (childRef.value) {console.log('Current count:', childRef.value.count);childRef.value.increment();console.log('Count after increment:', childRef.value.count);}
}onMounted(() => {if (childRef.value) {console.log('Child component mounted, initial count:', childRef.value.count);}
});
</script>

总的来说:

  • defineExpose 用于在 <script setup> 中显式暴露组件内部状态和方法
  • 父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
  • 使用 defineExpose 可以让组件更加模块化和可控,只有显式暴露的部分才能被外部访问,增强了封装性和安全性

这个功能在组件之间需要进行复杂交互时特别有用,尤其是在大型项目中,能够显著提升代码的可读性和可维护性

3. 实战

也可通过函数进行暴露

<template><div><button @click="open">Fetch Data</button><div v-if="detailLoading">Loading...</div><div v-else><div v-for="item in detailData.attachment1" :key="item">{{ item }}</div><div v-for="item in detailData.attachment2" :key="item">{{ item }}</div></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import DangerousWorkApi from '@/api/DangerousWorkApi'const detailLoading = ref(false)
const detailData = ref({})
const props = defineProps(['id'])
const queryId = 'some-query-id'const getInfo = async () => {detailLoading.value = truetry {detailData.value = await DangerousWorkApi.getDangerousWork(props.id || queryId)const attachment1 = detailData.value.attachment1;const attachment2 = detailData.value.attachment2;detailData.value.attachment1 = attachment1.split(",");detailData.value.attachment2 = attachment2.split(",");} finally {detailLoading.value = false}
}defineExpose({ open: getInfo })onMounted(() => {getInfo()
})
</script>

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

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

相关文章

OpenAI 重磅发布:ChatGPT Mac 桌面应用震撼上线!

OpenAI 重磅发布&#xff1a;ChatGPT Mac 桌面应用震撼上线&#xff01; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff0…

51单片机:点亮一个LED灯

1.新建工程 选择AT89C52&#xff0c;在Atmel下显示的是See Microchip 并不需要添加启动文件到文件夹中。 添加main.c文件&#xff0c;c比cpp效率高&#xff0c;.asm汇编即更底层 程序编写好后 nop(); 该函数在这个头文件里面 #include <INTRINS.H> #include <R…

Java JDK下载安装教程(2024年)

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

2024 Google I/O Android 相关内容汇总

2024 Google I/O Android 相关内容汇总 本次 Google I/O 的核心虽然是 AI &#xff0c;但是 Android 也是作为主要议题出现&#xff0c; Android 部分可以简单分为产品和开发相关内容&#xff0c;接下来主要介绍这两部分的相关更新。 重点开始开发相关&#xff0c;内容不少 产…

业务系统加固和安全设备加固

业务系统加固 业务系统包含哪些系统? 业务系统漏洞面临的风险 1web风险 2漏洞扫描&#xff0c;端口扫描 3系统漏洞 4逻辑漏洞 5 信息泄露 6拒绝服务 7口令爆破 加固方式&#xff1a; 在风险加上修复 1web漏洞&#xff1a; 包括csrf,xss&#xff0c;口令破解等等 修…

koa2 + jsonwebtoken + koa-jwt:实现node token验证

一、koa token生成、验证 koa-jwt官网 https://github.com/koajs/jwt 推荐一个koa-jwt学习文档&#xff1a; https://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html jsonwebtoken方法添加 const { sign, verify } require(jsonwebtoken); const secretKey …

ICode国际青少年编程竞赛- Python-4级训练场-列表综合练习

ICode国际青少年编程竞赛- Python-4级训练场-列表综合练习 1、 Flyer[3].step(1) Flyer[7].step(2) Flyer[11].step(1) for i in range(4):Flyer[i * 2].step(1) Flyer[8].step(3)for i in range(3):Dev.turnRight()Dev.step(-5)2、 for i in range(5):Flyer[i5].step(Flyer[…

JavaWeb--18 tlias-web-management 登录认证

登录认证 1 登录功能功能开发 2 登录校验2.1 问题分析2.2 会话技术CookieSession令牌技术 2.3 JWT令牌介绍生成和校验登录下发令牌 2.4 过滤器Filter拦截路径过滤器链 登录校验-Filter 2.5 拦截器InterceptorInterceptor详解执行流程 登录校验- Interceptor 3 异常处理3.1 当前…

【会议征稿】2024年机器人前沿技术与创新国际会议(FTIR 2024, 7/19-21)

2024年机器人前沿技术与创新国际会议&#xff08;FTIR 2024&#xff09;将于2024年7月19-21日在中国杭州举行。FTIR 2024聚焦前沿技术与创新&#xff0c;将把机器人领域的创新学者和专家聚集到一个共同的论坛。会议的主要目标是促进机器人的研究和开发活动&#xff0c;另一个目…

基于EBAZ4205矿板的图像处理:11阈值系数可调的图像局部阈值二值化

基于EBAZ4205矿板的图像处理&#xff1a;11阈值系数可调的图像局部阈值二值化 先看效果 还是一样拿我的pynq当模特&#xff0c;然后用usb——HDMI采集卡把输出图像采集到电脑上。 注意看右边mobelxtem中的通过串口调节的参数&#xff0c; 我这里是实现了阈值系数可调的局部阈…

利用CAD绘制角度斜线的简易指南---模大狮模型网

在CAD设计中&#xff0c;绘制角度斜线是常见的需求&#xff0c;尤其在工程、建筑等领域中。正确绘制角度斜线不仅可以提高图纸的清晰度和美观度&#xff0c;还有助于准确表达设计意图。本文将介绍如何利用CAD软件进行角度斜线的绘制&#xff0c;为您提供简明易懂的操作指南。 一…

安全设备篇——抗DDOS设备

写在前面&#xff1a;up初研究这个设备的时候以为很容易&#xff0c;毕竟ddos嘛大家都懂&#xff0c;但是实际去找资料和研究的时候发现资料少的可怜&#xff0c;再加上大家知道ddos但大多没见过&#xff0c;万幸up的老东家某普有这类设备&#xff0c;和之前的同事沟通了一下还…

实战期权:权利金=定金;无需等到期日

买方: 无需支付保证金,只需支付较低的权利金(定金)。 风险: 亏损有上限,即权利金损失;但盈利无限,以小博大。 使用场景: 大型单边行情。 行情的绝对顶部 or 底部,最好是第二次顶或者第二次抵,风险较小。 买方举例: 假如判断当前在底部,买入看涨期权call…

网络完全精通版

一、目录结构 1.1目的的特点 windows和linux windows中C、D、E盘&#xff0c;每个都是一个根系统【多跟系统】 linux中只有一个根【单根系统】 1.2各个目录存储的内容 /root&#xff1a;linux中挂管理员用户的家目录 /home&#xff1a;linux中挂存储普通用户的家目录的目…

GitLab CI/CD的原理及应用详解(三)

本系列文章简介: 在当今快速变化的软件开发环境中,持续集成(Continuous Integration, CI)和持续交付(Continuous Delivery, CD)已经成为提高软件开发效率、确保代码质量以及快速响应市场需求的重要手段。GitLab CI/CD,作为GitLab平台提供的一套强大的自动化工具集,为开…

Unity射击游戏开发教程:(17)添加推进器推进和推进器推进动画

添加推进器打开功能 我们可以添加一个推进器栏,用于跟踪玩家使用推进器增强(按住左 Shift 键)的时间。当未使用推力时,将会有一段延迟,直到推力条开始再生。当棒再生时,可以使用推进器,但再生过程将重新开始。 我们将使用 Unity 的 UI Slider 组件,因此我们将其添加到已…

编程算法中,有许多经典的问题和挑战

在编程算法中&#xff0c;有许多经典的问题和挑战&#xff0c;下面是一些常见的问题名字及其简要描述&#xff1a; 迷宫问题 (Maze Problem)&#xff1a;给定一个迷宫布局&#xff0c;找到从起点到终点的路径。 八皇后问题 (N-Queens Problem, 通常特指8皇后)&#xff1a;在NN…

Docker容器启动时报OCI runtime create failed解决方案

解决方案&#xff1a;此问题是因为selinux未关闭所致&#xff0c;解决方案是修改/etc/selinux/config文件&#xff0c;将SELINUX设为disabled&#xff0c;重启服务器即可。

ctfshow web入门 SSTI注入 web361--web368

web361 这里转载一篇教绕过方法的文章 hint:考点就是题目 传参?name{{2*2}}回显是4&#xff0c;找到漏洞 说实话这里对py不太好的朋友有点不友好&#xff0c;因为payload都是py的 这里用popen方法来执行命令 ?name{{config.__class__.__init__.__globals__[os].popen(more …