vue3的getCurrentInstance获取当前组件实例

ops/2025/3/4 16:46:11/

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/ops/15672.html

相关文章

vue3第二十四节(JSX用法)

vite 创建项目的情况下 安装 npm i vitejs/plugin-vue-jsx -D配置vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx // https://vitejs.dev/config/ export default defineConfig({plugins: […

如何批量跟踪京东物流信息

随着电商行业的快速发展&#xff0c;快递业务日益繁忙&#xff0c;无论是商家还是消费者&#xff0c;都需要一种高效、便捷的快递查询工具。快递批量查询高手软件应运而生&#xff0c;以其强大的功能和便捷的操作体验&#xff0c;赢得了广大电商、微商精英们的青睐。 快递批量…

WebRTC初识

1. 概念 WebRTC (Web-Real-Time Communications) 是一项实时的通讯及技术&#xff0c;它允许网络应用或站点在不借助中间媒介的情况下&#xff0c;建立浏览器之间点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流、音频流或其他任意数据的传输。这种技…

CSS画一条虚线,并且灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色

CSS画一条虚线,并且灵活设置虚线的宽度和虚线之间的间隔和虚线的颜色。 先看效果图&#xff1a; 在CSS中&#xff0c;你可以使用border属性或者background属性来画一条虚线。以下是两种常见的方法&#xff1a; 方法一&#xff1a;使用border属性 你可以设置一个元素的border…

SpringCloud系列(15)--Eureka自我保护

前言&#xff1a;在上一章节中我们说明了一些关于Eureka的服务发现功能&#xff0c;也用这个功能进行接口的实现&#xff0c;在本章节则介绍一些关于Eureka的自我保护 1、Eureka保护模式概述 保护模式主要用于一组客户端和Eureka Server之间存在网络分区场景下的保护。默认情况…

Pow(x,n)——力扣

python&#xff08;快速幂&#xff09; 50. Pow(x, n) 已解答 中等 相关标签 相关企业 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;10…

前端网络安全面试题:CSRF 与 XSS

CSRF 什么是 CSRF CSRF (Cross-Site Request Forgery)&#xff1a; 跨站请求伪造是一种攻击手段&#xff0c;攻击者通过恶意构造一个链接或表单&#xff0c;诱使用户在已登录的目标网站上执行非本意的操作。当用户点击或提交这个恶意内容时&#xff0c;浏览器会自动带上用户的…

深度学习与神经网络入门

前言 人工智能&#xff08;AI&#xff09;与机器学习&#xff08;ML&#xff09;与深度学习&#xff08;DL&#xff09;的关系&#xff1a; DL包含于ML&#xff0c;ML包含于AI。 即深度学习是机器学习一部分&#xff0c;机器学习又是人工智能的一个分支。 那么深度学习到底有…