Vue2升级到Vue3,有很大的改变,其中最明显的就是以前的this,在新版本中无法使用了,这是为什么呢?
官方是这样说的:在 setup() 内部,this 不会是该活跃实例的引用(即不指向vue实例),因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。
因此setup函数中不能使用this。所以Vue为了避免我们错误的使用,直接将setup函数中的this修改成了 undefined
所以想要在Vue3中使用this, Vue为我们提供了getCurrentInstance()方法,这个方法返回了ctx和proxy。
具体使用如下:文章来源:https://www.toymoban.com/news/detail-521081.html
<script setup>
import {getCurrentInstance} from '@vue/runtime-core'
const currentInstance = ref()
onMounted(() => {
/**
* 此处这样使用时因为Vue3不同于Vue2,在 Vue3的setup中我们是无法访问到this的,所以我们需要借助一个方法,
* 那就是getCurrentInstance,该方法返回了当前的实例对象
*
* 注意!!!!!
* 不要把该函数当作是optionsApi中来获取 this 使用。
* 该方法只在 setup、生命周期函数中有效,在方法中是无效的
* */
currentInstance.value = getCurrentInstance()
});
</script>
这样我们就可以借助currentInstance 来完成在Vue2中this的使用场景了文章来源地址https://www.toymoban.com/news/detail-521081.html
到了这里,关于Vue3 中如何使用this的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!