vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3中getCurrentInstance获取组件

vue3中getCurrentInstance获取组件踩坑及解决

作者:jieyucx

这篇文章主要介绍了vue3中getCurrentInstance获取组件踩坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、getCurrentInstance基本用法

我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象,也就是当前vue这个实例对象 

Vue2中,可以通过this来获取当前组件实例; 

Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。

在Vue3中,getCurrentInstance()可以用来获取当前组件实例 

常见的用途包括:

请注意,getCurrentInstance 的返回值是一个组件实例对象,可以通过 .ctx 来访问该实例的上下文对象,或者通过 .proxy 来访问该实例的代理对象。两者的区别在于,通过 .ctx 访问的是真实的组件实例,而通过 .proxy 访问的是一个代理对象,该代理对象可以在模板中直接使用。

基本使用:

import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        onMounted(() => {
            const instance = getCurrentInstance()
            console.log('实例', instance)
        })
        return {}
     }

打印出来的内容如下

我们可以根据自己的需求使用当前实例的一些属性和方法,比如我们获取当前组件中某个div的dom

代码如下:

<template>
    <div id="cx-container" :ref="refName">
    </div>
</template>
<script>
import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        const refName = 'cxContainer'
        onMounted(() => {
            const instance = getCurrentInstance().ctx
            const dom = instance.$refs[refName]
            console.log('dom', dom)
        })
        return {
       		 refName 
        }
     }
</script>

打印结果如下:

可以看到成功的获取了dom

注意:这种获取dom方式不推荐使用,具体见下文

二、getCurrentInstance使用注意点

1. getCurrentInstance 只能在 setup 或生命周期钩子中使用

举个例子:

<script>
import { getCurrentInstance, onMounted} from 'vue'
export default {
    setup() {
        const refName = 'cxContainer'
        const onResize = () => {
            const instance = getCurrentInstance()
        	console.log('instance', instance)		
        }
        onMounted(() => {
            window.addEventListener('resize', onResize)
        })
        return {
       		 refName 
        }
     }
</script>

以上代码我们将const instance = getCurrentInstance()放在了onResize函数中,然后在onMounted中监听浏览器尺寸变化,尺寸变化就出发onResize函数。 

打印结果如下:

可以看到instancenull,

这时如果我们将const instance = getCurrentInstance()放到setup函数中,或者onMounted中就可以成功获取实例

如需在 setup或生命周期钩子外使用,先在 setup 中调用 getCurrentInstance() 获取该实例然后再使用。

2. getCurrentInstance线上环境报错问题

本地代码

<script>
    import {getCurrentInstance} from "vue";
    export default {
      setup() {
         const {ctx} = getCurrentInstance();
         console.log('ctx', ctx)
      }
    
</script>

以上代码在本地开发调试没有问题,在线上环境会报错,如果通过这个ctx.$refs[xxx]获取dom,线上就会有问题。 

解决方案

使用proxy代替ctx,proxy线上不会出现问题

const { proxy } = getCurrentInstance()  

三、在vue3中不推荐使用getCurrentInstance获取组件实例

大家可以看看这位大佬的记录vue3中getCurrentInstance不推荐使用以及在<script setup>中获取全局内容(三种方式)

官方解释:

如果是获取dom大家可以通过ref获取,比如:

<template>
     <div ref="test">hhhhhh</div>
</template>
<script>
import {ref,onMounted } from 'vue'
export default {
    setup() {
        const test = ref(null)
        
        onMounted(() => {
            console.log('test实例',test.value)
         })
        return {
        	test
		}
	}
</script>

打印结果如下:

至于其他的一些常用属性和方法,vue3中的setup中提供了props和contexts上下文。官方setup用法

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文