使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

目录
  • 前言：
  • vue3官方提供的方法
    • 1、引入方法
    • 2、定义变量，接到我们的方法
    • 3、main.js中定义我们的全局变量
    • 4、页面中使用我们的全局变量
  • vue3+ts 使用官方方法遇到的问题：
  • 最终我解决问题的方法：
  • 补充：Vue3 getCurrentInstance与ts结合使用的问题
  • 总结

前言：

vue3的 setup中是获取不到this的，为此官方提供了特殊的方法，让我们可以使用this，达到我们获取全局变量的目的，但是在使用typescript的时候，就会有一些新的问题产生，这里来做一个整理。

vue3官方提供的方法

1、引入方法

import { getCurrentInstance } from 'vue'

2、定义变量，接到我们的方法

setup() {
    const { proxy } = getCurrentInstance()
}

3、main.js中定义我们的全局变量

app.config.globalProperties.$api = '111'

4、页面中使用我们的全局变量

setup() {
    const { proxy } = getCurrentInstance()
    console.log(proxy.$api)
}

vue3+ts 使用官方方法遇到的问题：

Property 'proxy' does not exist on type 'ComponentInternalInstance | null'

我在网上找的方法：网上资料入口

import { ComponentInternalInstance, getCurrentInstance } from 'vue';
// 添加断言
const { proxy } = getCurrentInstance() as ComponentInternalInstance

效果：不识别这种写法，不清楚是什么问题。多方尝试无果

最终我解决问题的方法：         

我把类型换成any，结果成功了，不知道原因，以后在查查资料

setup() {
   const { proxy } = getCurrentInstance() as any
}

补充：Vue3 getCurrentInstance与ts结合使用的问题

vue3项目中，如果不用ts这样使用是没问题的

const { proxy } = getCurrentInstance()

在ts中使用会报错：报错：...类型“ComponentInternalInstance | null”

我们在项目中一般会用到很多getCurrentInstance()方法，直接封装一下

创建useCurrentInstance.ts文件：

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance() {
    const { appContext } = getCurrentInstance() as ComponentInternalInstance
    const proxy = appContext.config.globalProperties
    return {
        proxy
    }
}

组件内使用：

<script lang="ts">
import { defineComponent } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
export default defineComponent({
  setup() {
    const { proxy } = useCurrentInstance();
    console.log(proxy);
  },
});
</script>

总结

到此这篇关于使用vue3+ts+setup获取全局变量getCurrentInstance的文章就介绍到这了,更多相关vue3 ts setup获取全局变量内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3.0实践之写tsx语法实例

    vue3.0实践之写tsx语法实例

    目录 测试tsx 新建一个App.tsx页面 tsx使用v-model指令 (App.tsx组件) 使用v-show.与三目运算符 tsx之数组的遍历(map) 自定义属性 data-index tsx绑定事件 tsx之 props父组件向子组件传递参数 App.vue 父 App.tsx 子 tsx之子组件 向父组件 传递数据 子组件 App.tsx App.vue 父 总结 00:下载 yarn add @vitejs/plugin-vue-jsx -D 01:引入 vite.config.

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    目录 在setup()钩子函数中调用 在<srcipt setup>中调用 在setup()钩子函数中调用 父组件 <template> <div> 我是父组件 <children ref="childrenRef" /> <button @click="handleChildren">触发子组件</button> </div> </template> <scrip

  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    目录 前言 Tsx与setup语法糖的优势 遇到的问题 最后 前言 想这样做的原因是在vue3里使用tsx开发时,props的声明显得异常麻烦,不禁想到defineProps的便利,但同时在vue3里tsx文件里tsx语法的书写必须在setup函数或者render函数里,无法正常的使用defineProps等一系列的宏.为了能够更加便利,使用了下文的方法. Tsx与setup语法糖的优势 目前,在vue3中使用tsx已经越来越流行且便捷,对于webpack与vite构建的项目,都有很好的插件支持

  • TSX常见简单入门用法之Vue3+Vite

    目录 1.安装tsx 1.安装tsx插件 2.vite.config.ts里的配置 3.tsconfig.json里的配置 2.使用TSX 1.app.vue里的代码 2.app.tsx的代码 注意: 总结 1.安装tsx 1.安装tsx插件 npm install @vitejs/plugin-vue-jsx -D 2.vite.config.ts里的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-v

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法

    目录 环境 问题描述 问题解决 补充:Vue3 getCurrentInstance与ts结合使用的坑 一.关于在ts中使用到类型定义错误问题 二.不能使用getCurrentInstance的ctx 总结 环境 vscodetypescript4vue3 问题描述 首先,vue3中的全局变量及方法的配置较vue2中的变化大家应该已经知道了,不清楚的可以查看官方说明,但是按照官方文档结合typescript使用时遇到了问题: axios.ts // axios.ts import axios f

  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    目录 前言: vue3官方提供的方法 1.引入方法 2.定义变量,接到我们的方法 3.main.js中定义我们的全局变量 4.页面中使用我们的全局变量 vue3+ts 使用官方方法遇到的问题: 最终我解决问题的方法: 补充:Vue3 getCurrentInstance与ts结合使用的问题 总结 前言: vue3的 setup中是获取不到this的,为此官方提供了特殊的方法,让我们可以使用this,达到我们获取全局变量的目的,但是在使用typescript的时候,就会有一些新的问题产生,这里来做

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • Python获取当前函数名称方法实例分享

    本文实例主要是Python中获取当前运行函数的名称,具体如下. python 具有强大的自省能力,在函数运行时,可以在函数内部获取到当前所在的函数名称,请看示例代码 #coding=utf-8 import sys import inspect def my_name(): print '1' ,sys._getframe().f_code.co_name print '2' ,inspect.stack()[0][3] def get_current_function_name(): prin

  • C#中Winform获取文件路径的方法实例小结

    本文实例讲述了C#中Winform获取文件路径的方法.分享给大家供大家参考.具体如下: 获取文件名方法: 用System.IO.Path.GetFileName和System.IO.Path.GetFileNameWithoutExtension(无扩展名)的方法 获取文件路径方法: //获取当前进程的完整路径,包含文件名(进程名). string str = this.GetType().Assembly.Location; result: X:\xxx\xxx\xxx.exe //(.exe

  • vue3.0公共组件自动导入的方法实例

    vue3.0公共组件自动导入的方法实例

    一.前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目.或者有大能可以说说vite怎么解决这个问题. 二.规则 我使用的注册规则是,搜索src/components/路径下的所有目录和子目录,搜索文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册.结构如下: 只注册index.vue,其他名字的组件不注册, 三.注册 由于vue

  • spring中通过ApplicationContext getBean获取注入对象的方法实例

    用SpringContextUtil实现ApplicationContextAware package util; import java.util.Locale; import org.springframework.beans.BeansException; import org.springframework.context.ApplicationContext; import org.springframework.context.ApplicationContextAware; pub

  • Python基于datetime或time模块分别获取当前时间戳的方法实例

    python的时间模块生成时间戳的方法是非常简单的,因为最近频繁用到了时间戳功能,这里简单总结了一下日常使用最为频繁的两个时间模块各自生成当前时间戳的方法,很简单,具体如下: now_time=str(datetime.datetime.now().strftime('%Y%m%d')) nowTime=str(time.strftime('%Y%m%d',time.localtime(time.time()))) print 'now_time:',now_time print 'nowTim

  • Vue3在Setup中使用axios请求获取的值方式

    目录 Setup中使用axios请求获取的值 Vue3+Setup使用知识点 Setup中使用axios请求获取的值 上次我们使用axios给项目搞上了网络请求,从此项目数据不再是静态的.对于后端返回的值如何赋值给data里面的变量并且赋予数据响应式,写此日记记录踩坑过程. axios返回的项目数据无法通过函数返回值返回,如何获取返回值呢? <script> import { defineComponent, reactive, onMounted, toRefs, ref } from &q

  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

随机推荐