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.mfbz.cn/a/564044.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【刷题】代码随想录算法训练营第二十天|654、最大二叉树,617、合并二叉树,700、二叉搜索树中的搜索,98、验证二叉搜索树

目录 654、最大二叉树617、合并二叉树700、二叉搜索树中的搜索98、验证二叉搜索树 654、最大二叉树 讲解&#xff1a;https://programmercarl.com/0654.%E6%9C%80%E5%A4%A7%E4%BA%8C%E5%8F%89%E6%A0%91.html 最大二叉树的规则&#xff1a; 二叉树的根是数组中的最大元素。左子…

电商数据采集API接口系列|请求示例测试方式丨商品详情,详情图,sku价格等

电商数据采集API接口系列是用于从电商平台收集各种商品信息的工具&#xff0c;包括商品详情、详情图、SKU价格等。以下是一般情况下使用电商API接口进行数据采集的步骤和测试方式&#xff1a; 1.请求方式&#xff1a;HTTP POST GET &#xff08;复制薇&#xff1a;Anzexi58 获…

VS安装教程

文章目录 VS安装步骤 VS安装步骤 &#xff08;1&#xff09; 下载VS2022社区版&#xff08;根据情况选择自己需要的版本下载&#xff09;&#xff0c;下载的方式&#xff0c;可以通过微软官方下载。https://visualstudio.microsoft.com/zh-hans/downloads/?cidlearn-onpage-d…

uniapp——授权报错,选择合适的基础库

说明 我的小程序开发版本点击选择头像报错 更换基础库就好了

4.9 启动系统任务❤❤❤

有一些特殊的任务需要在系统启动时执行&#xff0c;例如配置文件加载、数据库初始化等操作。 Spring Boot对此提供了两种解决方案&#xff1a;CommandLineRunner和ApplicationRunner。 CommandLineRunner和ApplicationRunner基本一致&#xff0c;差别主要体现在参数上。 1. Co…

vue详解(3)

1. Vue 生命周期总结 四个阶段&#xff0c;八个钩子 -> 三个常用 created&#xff0c;mounted&#xff0c;beforeDestroy 2. 工程化开发 & 脚手架 Vue CLI 基本介绍&#xff1a; Vue CLI 是 Vue 官方提供的一个全局命令工具。 可以帮助我们快速创建一个开发 Vue 项目…

基于深度学习的脑部肿瘤检测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 当大脑中形成异常细胞时&#xff0c;就会发生脑肿瘤。肿瘤主要有两种类型&#xff1a;癌性&#xff08;恶性&#xff09;肿瘤和良性肿瘤。恶性肿瘤可分为原发性肿瘤和继发性肿瘤&#xff0c;前者始…

单片机STM32中断与事件的区别

【转】1-单片机STM32---中断与事件的区别 - Engraver - 博客园 (cnblogs.com) 路径不同&#xff0c;处理方式不同&#xff0c;是否有程序不同&#xff0c;是否有cpu参与不同。 事件是比中断更新的升级产物。

Golang | Leetcode Golang题解之第41题缺失的第一个正数

题目&#xff1a; 题解&#xff1a; func firstMissingPositive(nums []int) int {n : len(nums)for i : 0; i < n; i {for nums[i] > 0 && nums[i] < n && nums[nums[i]-1] ! nums[i] {nums[nums[i]-1], nums[i] nums[i], nums[nums[i]-1]}}for i …

JavaScript变量及数据类型

目录 概述&#xff1a; 变量&#xff1a; 前言&#xff1a; 变量的命名&#xff1a; 定义变量&#xff1a; 为变量赋值&#xff1a; 变量提升&#xff1a; let和const关键字&#xff1a; JS数据类型&#xff1a; 前言&#xff1a; typeof操作符&#xff1a; JS基本…

一二三应用开发平台使用手册——系统管理-用户组-使用说明

概述 在RBAC模型中&#xff0c;资源、角色、用户三个关键元素&#xff0c;构成权限体系。在平台设计和实现的时候&#xff0c;以下几个核心问题思考如下&#xff1a; 角色&#xff0c;单层平铺还是树形结构&#xff1f; 在小型应用中&#xff0c;角色数量有限的情况下&#x…

Gitea 简单介绍、用法以及使用注意事项!

Gitea 是一个轻量级的代码托管解决方案&#xff0c;它提供了一个简单而强大的平台&#xff0c;用于托管和协作开发项目。基于 Go 语言编写&#xff0c;与 GitLab 和 GitHub Enterprise 类似&#xff0c;但专为自托管而设计。以下是对 Gitea 的详细介绍&#xff0c;包括常用命令…

SpringBoot---------@Value,@ConfigurationProperyies以及多环境开发配置

application.yml server:port: 8080#logging: # level: # root: info(默认)array:name: zzlage: 18subject:- Java- Vue- SpringBoot Value注解的使用:从yml配置文件中获取数据&#xff0c;即可在类中使用 Value("${server.port}")private String port;Value(&q…

SpringBoot中Bean的创建过程及扩展操作点 @by_TWJ

目录 1. 类含义2. Bean创建过程 - 流程图3. 例子3.1. 可变属性注入到实体中3.2. 模拟Bean创建的例子 1. 类含义 BeanDefinition - 类定义&#xff0c;为Bean创建提供一些定义类的信息。实现类如下&#xff1a; RootBeanDefinition - 类定义信息&#xff0c;包含有父子关系的Be…

美国RAKSmart服务器性能科普

当我们谈论服务器性能时&#xff0c;无疑会涉及多个维度&#xff0c;包括存储能力、网络连接、稳定性、管理界面以及安全性等。在这篇科普文章中&#xff0c;我们将深入探讨美国RAKSmart服务器的性能特点。 首先&#xff0c;RAKSmart服务器在存储和扩展性方面表现出色。它们配备…

Git 工作原理

Git 工作原理 | CoderMast编程桅杆https://www.codermast.com/dev-tools/git/git-workspace-index-repo.html Workspace&#xff1a;工作区Index / Stage&#xff1a;暂存区Repository&#xff1a;仓库区&#xff08;或本地仓库&#xff09;Remote&#xff1a;远程仓库 Git 一…

绿联 安装transmission

绿联 安装transmission及中文UI 1、镜像 linuxserver/transmission:latest 2、安装 2.1、创建容器 按需配置权重。 2.2、基础设置 2.3、网络 桥接即可。 注&#xff1a;如果使用IPV6&#xff0c;请选择"host"模式。 注&#xff1a;如果使用IPV6&#xff0c;请选…

网络数据包嗅探器工具

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

JAVA学习笔记31(IO流)

1.IO流 1.文件流 ​ *文件在程序中是以流的形式来操作的 2.常用文件操作 1.创建文件对象 1.new File(String pathname) //根据路径构建一个File对象 main() {}public void create01() {String filePath "e:\\news1.txt";File filePath new File(filePath);tr…

c++ 线性搜索与二分搜索

线性搜索 假设该项目以随机顺序存在于数组中&#xff0c;并且我们必须找到一个项目。那么搜索目标项目的唯一方法就是从第一个位置开始&#xff0c;并将其与目标进行比较。如果项目相同&#xff0c;我们将返回当前项目的位置。否则&#xff0c;我们将转移到下一个位置。…
最新文章