vue3的getCurrentInstance获取当前组件实例

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

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

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

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

<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

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

页面上使用时:

this.$api

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

import api from './api'
app.config.globalProperties.api = api

页面上使用时:

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

在这里插入图片描述

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

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

相关文章

详解MySQL C API 相关接口(大白话就是:MySQL的c语言怎么写)

文章目录 1、C API 官方文档2、初始化 MYSQL3、连接 MySQL设置连接字符集&#xff08;使得客户端编码方式匹配&#xff09; 4、下发 mysql 指令5、获取 mysql 查询结果(保存起来)获取行与列遍历存储结果 6、释放 MYSQL\_RES 对象7、关闭 MySQL 连接8、总结 1、C API 官方文档 …

动态规划---斐波那契数列模型

目录 一、斐波那契数列的基本概念 二、动态规划在斐波那契数列中的应用与优势 三、实际案例&#xff1a;使用动态规划解决斐波那契数列问题 四、动态规划问题的做题步骤 五、例题 1、第N个泰波那契数---点击跳转题目 2、三步问题----点击跳转题目 3、最小花费爬楼梯---…

FANUC机器人socket通讯硬件配置

一、添加机器人选配包 Fanuc机器人要进行socket通讯&#xff0c;需要有机器人通讯的选配包&#xff0c;1A05B-2600-R648 User Socket Msg&#xff0c;1A05B-2600-R632 KAREL&#xff0c;1A05B-2600-R566 KAREL Diagnostic&#xff0c;1A05B-2600-J971 KAREL Use Sprt FCTN。 二…

【漏洞复现】WebLogic XMLDecoder反序列化(CVE-2017-10271)

1、漏洞描述 CVE-2017-10271漏洞产生的原因大致是Weblogic的WLS Security组件对外提供webservice服务&#xff0c;其中使用了XMLDecoder来解析用户传入的XML数据&#xff0c;在解析的过程中出现反序列化漏洞&#xff0c;导致可执行任意命令。攻击者发送精心构造的xml数据甚至能…

clickhouse数据去重函数介绍(count distinct)

非精确去重函数&#xff1a;uniq、uniqHLL12、uniqCombined 精确去重函数&#xff1a;uniqExact、groupBitmap 测试数据量&#xff1a;2000w 结论&#xff1a; 1.整形值精确去重场景&#xff0c;groupBitmap 比 uniqExact至少快 2x 2.groupBitmap仅支持无符号整形值去重&#x…

文化旅游3D数字孪生可视化管理平台推动文旅产业迈向更加美好的未来

随着数字化、智能化管理成为文旅产业发展的必然趋势&#xff0c;数字孪生公司深圳华锐视点创新性地推出了景区三维可视化数字孪生平台&#xff0c;将线下的实体景区与线上的虚拟世界完美融合&#xff0c;引领智慧文旅新潮流。 我们运用先进的数字孪生、web3D开发和三维可视化等…

详解Qt中的鼠标事件

在Qt中&#xff0c;处理鼠标事件是构建交互式界面的关键。Qt提供了一系列与鼠标相关的事件处理函数&#xff0c;允许开发者捕获鼠标的各种动作&#xff0c;如按下、释放、移动、双击等。以下是鼠标事件的使用方法、技巧以及注意事项&#xff0c;并附带C代码示例。 基础使用方法…

GDB多线程调试:Redis的IO多线程

Redis采用的网络模型是单线程的Reactor网络模型&#xff0c;异步处理&#xff0c;因为性能很高。 Reactor先从客户端获取请求&#xff0c;然后dispatch给具体的执行的线程。处理的流程即为read->decode->compute->encode->send。 而Redis的IO多线程的处理时&…

【C++】:拷贝构造函数和赋值运算符重载

目录 一&#xff0c;拷贝构造函数1. 什么是拷贝构造函数2. 拷贝构造函数的特性3. 实践总结 二&#xff0c;赋值运算符重载2.1 运算符重载2.2 赋值运算符重载 一&#xff0c;拷贝构造函数 1. 什么是拷贝构造函数 拷贝构造函数是特殊的构造函数。是用一个已经存在的对象&#x…

SAP采购订单-条件类型-配置开发步骤

由于采购业务变更&#xff0c;需要创建新的价格类型&#xff0c;并添加新的计算逻辑计算。首先在例程&#xff08;VOFM&#xff09;中创建计算逻辑&#xff0c;然后在系统配置&#xff08;SPRO&#xff09;中找到配置点&#xff0c;创建新的条件类型‘ZMM00’,创建定价过程‘ZM…

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

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

Flink面试(2)

Flink面试&#xff08;1&#xff09;-CSDN博客 9. Flink 状态如何存储&#xff1f; 在 Flink 中&#xff0c;状态存储 被叫做 StateBackend&#xff0c;它具备两种能力&#xff1a; 在计算过程中提供访问 State 能力&#xff0c;开发者在编写业务逻辑中能够使用 StateBacken…

网络数据包嗅探器工具

组织的网络非常庞大&#xff0c;包含服务器、交换机、路由器和接入点等众多节点&#xff0c;由于许多资源和流量不断通过这些节点&#xff0c;因此很难确定大量流量是真实的还是安全攻击的迹象&#xff0c;了解和了解组织的网络流量至关重要&#xff0c;一个有用的资源是网络数…

MySQL--mysql的安装(压缩包安装保姆级教程)

官网下载&#xff1a;www.mysql.com MySQL :: Download MySQL Community Server (Archived Versions) 1.MySQL下载流程&#xff1a; 第一步&#xff1a;点击download&#xff0c; 下滑找到MySQL community&#xff08;gpl&#xff09;Downloads>> 第二步&#xff1a;点…

通俗易懂,十分钟让你了解并上手 Docker

通俗易懂&#xff0c;十分钟让你了解并上手 Docker 一、Docker 能拿来解决什么问题二、Docker 的概念与模型1. 容器化技术2. 镜像的概念3. Docker与虚拟机 三. Docker的使用1. 环境安装2. 制作镜像3. 镜像管理&#xff08;1&#xff09; 图形界面&#xff08;2&#xff09; 命令…

Coursera: An Introduction to American Law 学习笔记 Week 03: Property Law

An Introduction to American Law 本文是 https://www.coursera.org/programs/career-training-for-nevadans-k7yhc/learn/american-law 这门课的学习笔记。 文章目录 An Introduction to American LawInstructors Week 03: Property LawKey Property Law TermsSupplemental Re…

多功能气象传感器解析

TH-WQX5多功能气象传感器在监测要素上越来越丰富。除了传统的温度、湿度、风速、风向等基本气象要素外&#xff0c;现代的多功能气象传感器还能够监测降雨量、大气压力、光照强度、紫外线强度、土壤温湿度等多种参数。这些数据的获取&#xff0c;使得农业生产者能够更全面地了解…

4款值得推荐的AI辅助编程工具(支持C#语言)

前言 在这个AI迅速发展的阶段&#xff0c;涌现出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率&#xff0c;是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具&#xff08;并且都支持C#语言&#xff09;&#x…

ChromaDB教程

使用 Chroma DB&#xff0c;管理文本文档、将文本嵌入以及进行相似度搜索。 随着大型语言模型 &#xff08;LLM&#xff09; 及其应用的兴起&#xff0c;我们看到向量数据库越来越受欢迎。这是因为使用 LLM 需要一种与传统机器学习模型不同的方法。 LLM 的核心支持技术之一是…

Linux 文件/目录管理(头歌实训)

目录 任务描述 相关知识 Linux 创建文件 Linux 删除文件 编程要求 测试说明 任务描述 相关知识 Linux 创建目录 Linux 删除目录 编程要求 测试说明 任务描述 相关知识 Linux 拷贝文件 Linux 重命名文件 编程要求 测试说明 任务描述 相关知识 Linux 拷贝目…