vue3还用this吗？getCurrentInstance获取当前组件实例

已于 2023-12-06 11:31:20 修改
阅读量6.3k 收藏 23
点赞数 23
分类专栏： vue相关语法 文章标签： vue.js javascript 前端 webpack ecmascript 前端框架 html
于 2023-11-24 13:35:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForForever9/article/details/134596655
版权

在 Vue 2 中，this 关键字代表当前组件实例。在组件的选项对象中，this 可以用于访问组件实例的属性、方法以及 Vue 实例的一些特定方法。

在Vue3中，我们发现this是undefined，那我们真的没法使用this了吗？vu3给我们提供了一个getCurrentInstance函数： 用于获取当前组件实例。身上有个ctx属性有点类似this,通过代码可以看到如何使用。

组件实例身上还有个proxy属性也基本相同，proxy.xxx = xxxx修改数据后-是动态修改的（数据页面都更新）

建议：vue3中已经不想让大家使用this了，直接通过变量名取值也是很方便的，

当然有喜欢用this的也可以使用这种方式，不过目前看来取到的值是只读的。

<template>
  <div style="font-size: 14px">
    <div>{
  {myName1}}</div>
    <div>{
  {myName2}}</div>
    <div>{
  {myName3}}</div>
  </div>
</template>

<script lang="ts">
// vue3.0版本语法
import { defineComponent, getCurrentInstance, ref } from "vue";

export default defineComponent({
  name: "组件名",
  
  setup() {
    // console.log(this);// undefi
最低0.47元/天 解锁文章
vue3的getCurrentInstance获取当前组件实例
qq_43151592的博客
04-19 2183
vue3的getCurrentInstance获取当前组件实例
在 Vue3 中获取组件实例的常见方法
繁若华尘的博客
02-22 1444
在 Vue3 中获取组件实例的方法取决于你的使用场景（组合式 API 或选项式 API）以及是否需要获取当前组件实例或子组件实例
为什么vue3内不使用this
小码哥AI、互联网副业项目
02-22 1914
为什么vue3内不使用this
Vue3 中 `this` 是什么？
siweisibiansitui的博客
03-17 1149
Vue 管理多个组件的this通过为每个组件创建一个独立的组件实例，并且确保this始终指向当前组件实例。即使页面中有多个组件，每个组件的this是独立的，Vue 自动为每个组件维护其生命周期和上下文。对于复杂的页面，Vue 的组件化架构确保了各个组件的隔离和管理，使得每个组件的状态和方法都可以通过this正确访问。
Vue3中getCurrentInstance()方法详解
最新发布
EntropyLee的博客
04-14 393
【代码】Vue3中getCurrentInstance()方法详解。
Vue3 获取当前组件实例
qq_30193097的博客
12-13 1560
是 Vue 3 中一个非常有用的工具，它允许开发者在 setup 函数或生命周期钩子中获取当前组件实例的上下文信息。然而，需要注意的是，该函数主要用于调试目的，并不推荐在生产环境中过度使用。在实际项目中，应根据具体需求选择合适的方式来获取和使用组件实例。是一个用于获取当前组件实例的重要函数。在 Vue 3 中，
vue3没有this怎么办?
热门推荐
苦夏木禾
06-05 1万+
在vue3中,新的组合式API中没有this,那我们如果需要用到this怎么办? 解决方法: getCurrentInstance 方法获取当前组件的实例，然后通过 ctx 或 proxy 属性获得当前上下文，这样我们就能在setup中使用router和vuex了 import { getCurrentInstance } from "vue"; export default { setup() { let { proxy } = getCurrentInstance(); prox
vue3获取当前组件实例的方法getCurrentInstance
Stars_in_rain的博客
01-13 9610
vue3获取当前组件实例的方法getCurrentInstance 在vue3中，setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，setup的执行时组件对象还没有创建，此时不能使用this来访问data/computed/methods/props，我们可以通过 getCurrentInstance这个函数来返回当前组件的实例对象，也就是当前vue这个实例对象 import { getCurrentInstance, onMounted, ref } from 'vue
Vue3 中 this 一分钟了解
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
09-26 8474
Vue3 中 this 一分钟了解
vue项目中在外部js文件中直接调用vue实例的方法比如说this
10-17
通常情况下，当我们使用this关键字时，它指向的是Vue实例。然而，在一些特定的情况下，比如在外部引入的JavaScript文件中，this可能并不指向Vue实例，而是指向全局对象window，这并不是我们想要的结果。那么，如何在...
6.用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？
kleinBlue.的博客
11-08 1418
一、组件设计 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式 现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同 这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可 这样，下次开发相同界面程序时就可以写更少的代码，意味着更高的开发效率，更少的Bug和更少的程序体积 二、需求分析 实现一个Modal组件，首先确定需要完成的内容： 遮罩层 标题内容 主体内...
vue3的getCurrentInstance获取组件实例踩坑记录
时清云的博客
01-09 5299
而 vue 相关生态的使用其实就是他们内部的事情了，他们有完善的测试用例可以跑测试，但是我们并没有，如果后续的某一个版本Vue变更了这个API，那么如果没有经过完整测试就部署上去的项目就会出现大规模的BUG反馈了。，getCurrentInstance 的返回值是一个组件实例对象，可以通过 .ctx 来访问该实例的上下文对象，或者通过 .proxy 来访问该实例的代理对象。两者的区别在于，通过 .ctx 访问的是真实的组件实例，而通过 .proxy 访问的是一个代理对象，该代理对象可以在模板中直接使用。
如何在vue3中获取当前实例，getCurrentInstance
qq_43405603的博客
06-02 5172
【代码】如何在vue3中获取当前实例，getCurrentInstance。
vue3----ref获取组件实例
m0_63237100的博客
06-30 5469
我是描述
vue3获得当前组件的实例
IT_iosers的博客
10-13 4711
引入 getCurrentInstance方法 获取当前组件的实例 import {getCurrentInstance} from 'vue' 使用 const instance = getCurrentInstance() console.log(instance,'当前组件的实例')
vue3获取子组件实例
m0_59338367的博客
12-12 7166
vue3获取子组件实例
vue3中的组件实例和计算属性
m0_72694993的博客
09-22 3724
1.通过getCurrentInstance进行获取组件实例（获取的是代理对象），通过其中的proxy中取到实例对象，但是值得注意的是，确保组件实例对象创建完成以后再去调用，否则不能执行。（可以在onMounted生命周期钩子中使用）vue3中的计算属性和vue2中的关键词相同，也是通过computed关键词进行使用，用法有一点点小小变化，如下边代码（不需要写在export defalut中了）
Vue3如何获取组件实例
05-10
在 Vue3 中获取组件实例有两种方法： 1. 使用 `ref` 引用组件，并通过 `value` 属性获取实例： ```html <template> <div> <MyComponent ref="myComponentRef" /> </div> </template> <script> import MyComponent from &#39;./MyComponent.vue&#39;; export default { components: { MyComponent }, mounted() { const myComponentInstance = this.$refs.myComponentRef.value; console.log(myComponentInstance); } } </script> ``` 2. 使用 `setup` 函数中的 `getCurrentInstance` 方法获取当前实例，并通过 `refs` 属性获取组件实例： ```html <template> <div> <MyComponent /> </div> </template> <script> import { getCurrentInstance } from &#39;vue&#39;; import MyComponent from &#39;./MyComponent.vue&#39;; export default { components: { MyComponent }, setup() { const instance = getCurrentInstance(); const myComponentRef = instance.refs.myComponentRef; console.log(myComponentRef.value); } } </script> ``` 注意：在 Vue3 中，组件实例可以通过 `refs` 属性获取，而不是像 Vue2 中通过 `$refs` 属性获取。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值