vue3的getCurrentInstance获取当前组件实例

embedded/2024/10/5 11:16:31/

vue3的setup中没有this时需要使用getCurrentInstance()来获取。

在 Vue 3 中,getCurrentInstance 方法可以在组合式 API(Composition API)中获取当前组件实例。这个方法返回一个包含了组件实例的对象,你可以用它来访问组件的 props、attrs、slots 和 emit 方法等。

proxy:访问响应式数据和方法
ctx:访问属性和方法
注:ctx代替this只适用于开发阶段,如果将项目打包放到生产服务器上运行,就会出错,ctx无法获取路由和全局挂载对象的。此问题的解决方案就是使用proxy替代ctx

举例:
1、如果说我们要通过$refs来获取dom。

javascript"><script setup>import { getCurrentInstance, onMounted } from "vue";const {proxy,ctx } = getCurrentInstance();onMounted(()=>{console.log(proxy.$refs.test_ref,ctx.$refs.test_ref)})
</script><template><div><div ref="test_ref">$refs获取</div></div>
</template>

在这里插入图片描述
2、全局导入api接口方便使用
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象
vue2的main.js

javascript">import api from './api' // 导入api接口
Vue.prototype.$api = api

页面上使用时:

javascript">this.$api

globalProperties是对 Vue 2 中 Vue.prototype 使用方式的一种替代,如果全局属性与组件自己的属性冲突,组件自己的属性将具有更高的优先级。
vue3的main.js

javascript">import api from './api'
app.config.globalProperties.api = api

页面上使用时:

javascript">import { getCurrentInstance, onMounted } from "vue";
const {proxy,ctx } = getCurrentInstance();onMounted(()=>{console.log(proxy.api)})

在这里插入图片描述


http://www.ppmy.cn/embedded/15847.html

相关文章

CTF网络安全大赛详情

网络安全已成为现代社会的一个关键挑战&#xff0c;随着互联网技术的飞速发展&#xff0c;从个人隐私保护到国家安全&#xff0c;网络安全的重要性日益突显。为了应对这一挑战&#xff0c;CTF&#xff08;Capture The Flag&#xff0c;中文&#xff1a;夺旗赛&#xff09;应运而…

【学习笔记二十一】EWM仓库两步拣配配置及操作展示

一、EWM两步拣配配置 1.定义两步拣配的WPT ①第一步:标准WPT2020,目标仓位是2010两步拣配的仓位,并创建存储类型2010的两步拣配的仓位 ②第二步,标准WPT2010,目标仓位9020发货区和发货的仓位 2.定义确定仓库处理类型的控制标识 3.确定仓库处理类型 4.仓库编码级别需要允…

SpringCloud系列(16)--将服务提供者Provider注册进Zookeeper

前言&#xff1a;在上一章节中我们说明了一些关于Eureka自我保护模式&#xff0c;而且自上一章节起关于Eureka的知识已经讲的差不多了&#xff0c;不过因为Eureka已经停更了&#xff0c;为了安全考虑&#xff0c;我们要用还在更新维护的注册中心来取代Eureka&#xff0c;而本章…

linux权限维持(四)

6.inetd服务后门 inetd 是一个监听外部网络请求 ( 就是一个 socket) 的系统守护进程&#xff0c;默认情况下为 13 端口。当 inetd 接收到 一个外部请求后&#xff0c;它会根据这个请求到自己的配置文件中去找到实际处理它的程序&#xff0c;然后再把接收到的 这个socket 交给那…

综合练习

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 下面我们通过一些实战练习加深对存储过程和函数的认识 以 scott 用户下 emp 数据表为基础&#xff0c;创建如下过程 (1)以部门编号为输入参数&#xff0c;查询该部门的平均…

macbook m1 nacos集群启动失败报错的解决办法

问题来源&#xff1a;(黑马springcloud学习过程)P29-06-Nacos配置管理-nacos集群搭建 问题描述&#xff1a;详情见nacos.log和start.out WebServerException: Unable to start embedded Tomcat (mach-o file, but is an incompatible architecture (have ‘x86_64’, need ‘a…

探索常见经典目标检测算法:从YOLO到Faster R-CNN

目标检测是计算机视觉领域中的重要任务之一&#xff0c;它旨在从图像或视频中检测出目标的位置和类别。随着深度学习技术的发展&#xff0c;许多经典的目标检测算法相继出现&#xff0c;其中包括YOLO&#xff08;You Only Look Once&#xff09;、Faster R-CNN&#xff08;Regi…

【设计模式】10、composite 组合模式

文章目录 十、composite 组合模式10.1 search_in_file_folder10.1.1 inode_test.go10.1.2 inode.go10.1.3 file.go10.1.4 folder.go 十、composite 组合模式 https://refactoringguru.cn/design-patterns/composite 树状结构, 适合用组合模式, 不断递归, 对各子节点求和, 直到…