vue3中的getCurrentInstance
文章类型:Vue
发布者:admin
发布时间:2023-04-10
在setup和其他composition API中没有this,若使用options API可以照常使用this
一:方法
使用getCurrentInstance ,只能在setup或生命周期钩子中使用,
getCurrentInstance是一个function方法,getCurrentInstance()是一个对象,proxy也是一个对象。proxy是getCurrentInstance()对象中的一个属性,通过对象的解构赋值方式拿到proxy
import { onMounted, getCurrentInstance } from 'vue'
export default {
name: 'GetInstance',
data() {
return {
x: 1,
y: 2
}
},
setup() { // setup是created beforeCreate 合集 组件还没正式初始化
onMounted(() => {
console.log('this in onMounted', this) // undefined
console.log('x', instance.data.x) // 1 onMounted中组件已经初始化了
})
const instance = getCurrentInstance()
console.log('instance', instance)
},
mounted() {
console.log('this2', this)
console.log('y', this.y)
}
}
二:问题 :开发中只适用于调试! 不要用于线上环境,否则会有问题
三:解决方案
1:获取挂载到全局中的方法
const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)
2:使用proxy
const { proxy } = getCurrentInstance()