vue3的getCurrentInstance获取当前组件实例

news2024/12/25 14:19:53

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.coloradmin.cn/o/1614229.html

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

相关文章

Apache POI报表统计

Apache POl是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POl 在 Java 程N序中对Miscrosoft Office各种文件进行读写操作。一般情况下&#xff0c;POI都是用于操作 Excel 文件。 导入Maven坐标&#xff1a; <dependency>&l…

文件I/O基础-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板

本章将介绍Linux应用编程中最基础的知识&#xff0c;即文件I/O&#xff08;Input/Output&#xff09;。文件I/O指的是对文件进行读写操作&#xff0c;在Linux系统中一切皆文件&#xff0c;这是Linux系统设计的核心理念&#xff0c;因此文件I/O操作既是基础又是最重要的部分。本…

剑指offer剪绳子;leetcode:LCR 131. 砍竹子 I

现需要将一根长为正整数 bamboo_len 的竹子砍为若干段&#xff0c;每段长度均为正整数。请返回每段竹子长度的最大乘积是多少。 示例 1&#xff1a; 输入: bamboo_len 12 输出: 81提示&#xff1a; 2 < bamboo_len < 58 注意&#xff1a;本题与主站 343 题相同&#…

硬件中断错误HardFault_Handle如何解决

一、在硬件中断处点击断点 二、打开Call Stack Window 三、打开Disassembly Window 四、右击空白处&#xff0c;输入遇到硬件中断前地址&#xff0c;即可知道错误原因 程序就会自动跳转硬件中断错误处 ​​​​​​

Python中列表数据的保存与读取:以txt文件为例

目录 引言 一、列表数据的保存 二、列表数据的读取 三、进阶用法与注意事项 1. 处理嵌套列表 2. 处理大量数据 3. 注意事项 四、总结 引言 在Python编程中&#xff0c;我们经常需要处理各种类型的数据&#xff0c;包括列表。列表是一种非常灵活的数据结构&#xff0c;…

天梯赛 L2-052 吉利矩阵

//r[n]:当前第几列的值。 //l[n]:当前第几行的值。 暴力减止 #include<bits/stdc.h> using namespace std; #define int long long const int n1e3; int a,b,c,l[n],r[n],an; void dfs(int x,int y) {if(xb1){an;return ;}for(int i0;i<a;i){l[x]i;r[y]i;if(l[x]&l…

Gateway断言工厂

这个用的时候可以在官网上查

0.5W 3KVDC 隔离单、双输出 DC/DC 电源模块——TPV-W5 3.3V, 5V,12V 15V系列

TPV-W5系列提供正负双输出和单输出&#xff0c;工业级环境温度&#xff0c;用于PCB安装的国际标准结构。此系列产品小巧&#xff0c;效率高&#xff0c;低输出纹波及能承受3000V以上的耐压&#xff0c;用于需要正负电压或单输出和高隔离电压的场合。封装有SIP和DIP可选。

第一届 “帕鲁杯“ writeup

文章目录 MiscMisc-签到江FM 145.8ez_misc为什么我的新猫猫吃不饱 Crypto玛卡巴卡有什么坏心思呢 webWeb-签到 应急响应1.找到JumpServer堡垒机中flag标签的值。2.提交攻击者第一次登录时间。3.提交攻击者源IP。4.提交攻者使用的cve编号。5.提交攻击者留在Web服务器上的恶意程序…

Linux系统-进程和计划任务管理

一.程序和进程 1.程序 保持在硬盘、光盘等介质中的可执行代码和数据文件中静态保存的代码 2.进程 在CPU及内存中运行的程序代码动态执行的代码父、子进程每个程序可以创建一个或多个进程 3.进程特征 动态性&#xff1a;进程是程序的一次执行过程&#xff0c;是临时的&…

使用easyexcel将csv转为excel

一.背景 供应商系统下载的csv文件不支持域控&#xff08;主要是第三方wps服务不能对csv文件加密&#xff0c;但是可以对office系列产品进行权限访问的加密控制&#xff09;。因此思路就改为现将csv文件转为excel文件&#xff0c;然后对excel文件进行加域控制。本文主要介绍如何…

MySQL学习笔记5——函数和索引

函数和索引 一、函数1、数学函数2、字符串函数3、条件判断函数 二、索引1、索引是什么2、单字段索引3、组合索引4、总结 一、函数 MySQL提供了很多功能强大&#xff0c;而且使用起来非常方便的函数&#xff0c;包括数学函数、字符串处理函数和条件判断函数等。 1、数学函数 …

Flink面试(1)

1.Flink 的并行度的怎么设置的&#xff1f; Flink设置并行度的几种方式 1.代码中设置setParallelism() 全局设置&#xff1a; 1 env.setParallelism(3);  算子设置&#xff08;部分设置&#xff09;&#xff1a; 1 sum(1).setParallelism(3) 2.客户端CLI设置&#xff0…

shell简单联系项目

文章目录 推荐一个vscode上的好用的神奇如何使用的方式连接主机的方式配置新主机配置信息启动连接的方式 联系shell 命令的方式读取文件信息设置本地环境变量的方式获取随机数的方式简单案例信息 推荐一个vscode上的好用的神奇 如何使用的方式 连接主机的方式 配置新主机 配置…

运维小技能:nacos部署(外接mysql)

文章目录 I 安装nacos(m1版本)1.1 镜像启动1.2 查看docker容器日志1.3 开启鉴权II 外接mysql的docker部署方式2.1 复制mysql-schema.sql2.2 导入mysql-schema.sqlIII 配置远程用户3.1 创建数据库远程用户3.2 查看远程用户是否有密码I 安装nacos(m1版本) docker search nacos:查…

集成触发器(数电笔记)

同步触发器&#xff1a; 主从触发器&#xff1a; 边沿触发器&#xff1a;

【团体程序设计天梯赛】L2-052 吉利矩阵

思路&#xff1a; 直接回溯枚举每一个位置填的数&#xff0c;二维肯定是不方便的&#xff0c;我们转成一维&#xff0c;下标x从0到n*n-1。二维数组下标从0到n-1&#xff0c;在一维中下标为x的点在二维中对应行是x/n&#xff0c;列是x%n。 每个数最小能填的是0&#xff0c;最大…

一套在线画图工具(突突图 Procviz)

突突图(Procviz)是一款面向跨平台作图平台。支持流程图、思维导图、框架图、组织架构图、ER图、网络拓扑图等。实现了多团体同时协作&#xff0c;实时同步&#xff0c;解决跨地域合作作图的问题。平台提供了丰富的模板和素材库&#xff0c;轻松完成作图&#xff0c;效率翻倍。 …

imx6ull设备树驱动--pinctl、ioctl

添加pinctl节点 进入arch/arm/boot/dts目录下dts文件 在iomuxc下添加pinctlled节点 将 GPIO1_IO03 这个 PIN 复用为 GPIO1_IO03&#xff0c;电气属性&#xff08;配置GPIO一些列寄存器&#xff09;值为 0X10B0 添加led设备节点 与上一节一样&#xff0c;在 / 下面添加设备节…

《AIGC辅助数据分析与挖掘》AIGC助力数据可视化:Excel图形化思维与实施技巧

01 前言 在当今的数据分析中&#xff0c;数据可视化扮演着至关重要的角色。作为一款常用工具&#xff0c;Excel提供了丰富的图形展示功能。利用AIGC&#xff0c;我们可以快速选择合适的图形类型&#xff0c;并进行专业的配置&#xff0c;从而使得数据展示更加吸引人且具有更好…