vue3的getCurrentInstance获取当前组件实例

news/2024/10/19 0:20:36/

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/news/1436535.html

相关文章

使用 ollama 部署最新的Llama 3 70B本地模型

一、ollama是什么? 在本地启动并运行大型语言模型。运行Llama 3&#xff0c;Mistral, Gemma, Code Llama和其他模型。自定义并创建您自己的。 综合优点&#xff1a; 快速下载容器自动运行大模型&#xff0c;现在下载&#xff0c;马上上手。本地利用 cpu 运行大模型&#xff0c…

Beckhoff倍福工业电脑C6240-1037-0030主板维修CB1051-0003 CPU深圳捷达工控维修

Installation and Operating instructions for Control Cabinet PC C6240 from -0060 PS/2 连接 PS/2 上部 PS/2 连接器 (X104) 允许使用 PS/2 鼠标&#xff0c;而 PC 键盘可连接至下部 PS/2 连接器 (X103)。 USB接口 USB1 – USB4 四个 USB 接口 (X108 – X111) 用于通过 US…

重发布及路由策略实验

目录 一、实验拓扑 二、实验需求 1、按照图示配置 IP 地址&#xff0c;R1&#xff0c;R3&#xff0c;R4 上使用 loopback 口模拟业务网段 2、R2&#xff0c;R3 和R4运行 oSPF&#xff0c;各自协议内部互通 3、在 RIP 和 oSPF 间配置双向路由引入&#xff0c;要求除 R4 上的…

【uniapp】微信小程序2024手机号快速验证及无感登录教程(内附代码)

组件&#xff1a;手机号快速验证组件 适用对象&#xff1a;企业/个体 费用&#xff1a;0.03元/次 目录 前言思路前端后端代码无感登录onload事件无感登录方法登录判断后端mini_login2 最后 前言 最近注册了公司&#xff0c;可以注册具有支付能力的小程序了&#xff0c;各种材料…

Qt实现XYModem协议(八)

1 概述 XMODEM协议是一种使用拨号调制解调器的个人计算机通信中广泛使用的异步文件运输协议。这种协议以128字节块的形式传输数据&#xff0c;并且每个块都使用一个校验和过程来进行错误检测。使用循环冗余校验的与XMODEM相应的一种协议称为XMODEM-CRC。还有一种是XMODEM-1K&am…

离散型制造行业智能工厂解决方案,助力国家新智产业升级

离散型制造行业智能工厂标准解决方案 离散型制造行业的智能工厂解决方案是推动国家智能制造产业升级的关键。 1. 集中优势资源&#xff1a;实施攻关计划&#xff0c;瞄准关键核心技术和重点产业进行定向突破&#xff0c;特别是在集成电路(IC)、AI、生物医药等领域。2. 国家创…

k8s pod使用sriov

之前的文章中讲了k8s multus的使用&#xff0c;本章节来讲述下如何使用multus来实现sriov的使用。 一、sriov 简介 SR-IOV在2010年左右由Intel提出&#xff0c;但是随着容器技术的推广&#xff0c;intel官方也给出了SR-IOV技术在容器中使用的开源组件&#xff0c;例如&#…

【源码】完美运营版商城+虚拟商品全功能商城+全能商城小程序+智慧商城系统+全品类百货商城

完美运营版商城/拼团/团购/秒杀/积分/砍价/实物商品/虚拟商品等全功能商城 干干净净 没有一丝多余收据 还没过手其他站 还没乱七八走的广告和后门 后台可以自由拖曳修改前端UI页面 还支持虚拟商品自动发货等功能 挺不错的一套源码 前端UNIAPP 后端PHP 一键部署版本 CD&…