iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue3中关于getCurrentInstance的大坑及解决
  • 648
分享到

Vue3中关于getCurrentInstance的大坑及解决

摘要

目录关于getCurrentInstance的大坑解决方案vue3核心之getCurrentInstanceVue3.x中的核心方法,用于访问实例上下文的router及vuex等总结

关于getCurrentInstance的大坑

开发中只适用于调试! 不要用于线上环境,否则会有问题!

解决方案

方案1.

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

获取挂载到全局中的方法

方案2.

const { proxy } = getCurrentInstance()  

使用proxy线上也不会出现问题

vue3核心之getCurrentInstance

vue3.x中的核心方法,用于访问实例上下文的router及vuex等

1、概述:一个很重要的方法,获取当前组件的实例、上下文来操作router和vuex等。

2、使用:由vue提供,按需引入:import { getCurrentInstance} from 'vue'

import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();
 
// 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
// ctx 中包含了组件中由ref和Reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue3中关于getCurrentInstance的大坑及解决

本文链接: https://www.lsjlt.com/news/210217.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作