Vue3中關(guān)于getCurrentInstance的大坑及解決
更新時(shí)間：2023年04月20日 08:42:34 作者：小張很囂張～
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
關(guān)于getCurrentInstance的大坑
開發(fā)中只適用于調(diào)試！ 不要用于線上環(huán)境，否則會(huì)有問題！
解決方案
方案1.
const instance = getCurrentInstance() console.log(instance.appContext.config.globalProperties)
獲取掛載到全局中的方法
方案2.
const { proxy } = getCurrentInstance() ?使用proxy線上也不會(huì)出現(xiàn)問題
vue3核心之getCurrentInstance
vue3.x中的核心方法，用于訪問實(shí)例上下文的router及vuex等
1、概述：一個(gè)很重要的方法，獲取當(dāng)前組件的實(shí)例、上下文來操作router和vuex等。
2、使用：由vue提供，按需引入：import { getCurrentInstance} from 'vue'
import { getCurrentInstance } from 'vue';
// 獲取當(dāng)前組件實(shí)例
const instance = getCurrentInstance();
// 獲取當(dāng)前組件的上下文，下面兩種方式都能獲取到組件的上下文。
const { ctx } = getCurrentInstance(); // 方式一，這種方式只能在開發(fā)環(huán)境下使用，生產(chǎn)環(huán)境下的ctx將訪問不到
const { proxy } = getCurrentInstance(); // 方式二，此方法在開發(fā)環(huán)境以及生產(chǎn)環(huán)境下都能放到組件上下文對(duì)象（推薦）
// ctx 中包含了組件中由ref和reactive創(chuàng)建的響應(yīng)式數(shù)據(jù)對(duì)象,以及以下對(duì)象及方法;
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總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
這篇文章主要介紹了vue項(xiàng)目中使用vuedraggable,本文給大家介紹了錯(cuò)誤問題分析及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Vue-cli3多頁面配置詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
vue.js實(shí)現(xiàn)格式化時(shí)間并每秒更新顯示功能示例
這篇文章主要介紹了vue.js實(shí)現(xiàn)格式化時(shí)間并每秒更新顯示功能,結(jié)合實(shí)例形式分析了vue.js時(shí)間格式化顯示與基于定時(shí)器進(jìn)行實(shí)時(shí)更新的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
vue移動(dòng)端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動(dòng)端h5頁面當(dāng)中，其中適配是經(jīng)常會(huì)遇到的問題，這塊主要有四個(gè)方法可以適用。這篇文章主要介紹了vue移動(dòng)端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08