vue3中使用getCurrentInstance来代替this

概念
在 vue2 版本中，可以通过 this 来获取当前组件实例，但是在 vue3 setup 中是无法通过 this 获取组件实例对象，console.log(this) 打印出来的值是undefined。而使用 getCurrentInstance 方法就能获取当前组件的实例、上下文来操作 router 和 vuex 等。

使用

例子一：

<script setup>
import { getCurrentInstance, ref } from "vue";// 获取当前实例，在当前实例充当vue2 中的this
// 获取当前组件实例
const instance = getCurrentInstance();
// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
// 确定更多筛选
const onSureMoreScreen = () => {
   // 隐藏更多筛选
  instance.proxy.$refs.sureScreen.toggle();
  //proxy.$refs.sureScreen.toggle();     //该方式作用和上面的一样
}
</script>

例子二：

1.// 在新的vue-router里面尤大加入了一些方法，比如这里代替this的useRouter，具体使用如下：
//引入路由函数
import { useRouter } from "vue-router";
//使用
setup() {
    //初始化路由
    const router = useRouter();
    router.push({
        path: "/"
    });
    
    return {};
}
 

2.在vue2中可以通过this来访问到$refs，vue3中由于没有this所以获取不到了，但是官网中提供了方法来获取:

<template>
  <h2 ref="root">姓名</h2>
</template>
<script>
    import { onMounted, ref } from 'vue'
    export default {
        name: 'test9',
        setup(){
            const root  = ref(null)
            onMounted(()=>{
                console.log(root.value);
            })
            return {
                root
            }
        },
    }
</script>

//第二种方法，也可以通过getCurrentInstance来获取
<template>
  <h2 ref="root">姓名</h2>
</template>

<script>
    import { onMounted, ref, getCurrentInstance } from 'vue'

    export default {
        name: 'test9',
        setup(){)
            const {proxy} = getCurrentInstance()
            onMounted(()=>{
                console.log(proxy.$refs.root);
            })
            return {
            }
        },
    }
</script>

3.关于element在vue3的使用方法，没有this.$message等方法解决方案
<template>
  <button @click="doLogin">登录</button>
</template>

<script>
import { getCurrentInstance } from 'vue'
export default {
  name: 'Test',
  setup () {
    const instance = getCurrentInstance() // vue3提供的方法，创建类似于this的实例
    const doLogin = () => {
      instance.proxy.$message({ type: 'error', text: '登录失败' }) // 类似于this.$message()
    }
    return { doLogin }
  },
   // 如果想试用this.$message，须在mounted钩子函数中，setup中没有this实例，
   //但vue3.0中还是建议在setup函数中进行逻辑操作
  mounted () {
    this.$message({ type: 'error', text: '登录失败' })
  }
}
</script>

注意
1、getCurrentInstance 只能在 setup 或生命周期钩子中使用
2、ctx 和 proxy 都是 getCurrentInstance() 对象中的属性，通过解构赋值的方式拿到。可以看到，2者有所区别。ctx 是普通对象，proxy 是 Proxy 对象。
3、getCurrentInstance 是一个 function 方法，getCurrentInstance() 是一个对象，proxy 也是一个对象。proxy 是 getCurrentInstance() 对象中的一个属性，通过对象的解构赋值方式拿到 proxy。

参考：

vue3中使用 getCurrentInstance - 掘金 (juejin.cn)

解决vue3没有this造成的无法使用vue2_vue3 this-CSDN博客

vue3中使用getCurrentInstance来代替this

vue3中使用getCurrentInstance来代替this

评论 (0)