如何在vue3中获取当前实例，getCurrentInstance

最新推荐文章于 2024-06-22 09:13:58 发布

一只桃子~

最新推荐文章于 2024-06-22 09:13:58 发布

阅读量4.5k

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43405603/article/details/131004189

版权

在Vue2中，可以通过this关键字获取当前组件实例，但在Vue3的setup函数内，this是未定义的。为了解决这个问题，Vue3提供了getCurrentInstance()方法来获取组件实例，例如用于调用$emit。在示例代码中，通过proxy来使用$emit，proxy是从getCurrentInstance()获取的组件实例代理。

摘要由CSDN通过智能技术生成

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

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

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

import { getCurrentInstance} from 'vue'

export default {

    setup (props) {
        const {proxy}=getCurrentInstance();//引入代理，为了使用$emit  

        function modalProps(data){
            //emitOne这个方法在父组件上，因为现在这个子组件是在父组件里，为了实现子改父
           proxy.$emit("emitOne","111111");
        }
    
        return {
            ...toRefs(state),modalProps,modalEmits
        }
    }
}