在Vue3的setup中如何使用this

这篇具有很好参考价值的文章主要介绍了在Vue3的setup中如何使用this。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在Vue2中,可以通过this来获取当前组件实例; 但是Vue3中,在setup中无法通过this获取组件实例,console.log(this)打印出来的值是undefined。

所以想要在Vue3中使用this, Vue为我们提供了getCurrentInstance()方法,这个方法返回了ctx和proxy。

 1、概述:一个很重要的方法,获取当前组件的实例、上下文来操作router和vuex等。

2、使用:由vue提供,官方文档现已找不到此api,可寻找其他替代方案,可能也不推荐使用。。。按需引入:import { getCurrentInstance } from 'vue'

import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance();
 
// 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。
// 方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
const { ctx }  = getCurrentInstance(); 
//  方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
const { proxy }  = getCurrentInstance();  
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;

ctx和proxy都是getCurrentInstance()对象中的属性,通过解构赋值的方式拿到。可以看到,2者有所区别。ctx是普通对象,proxy是Proxy对象。文章来源地址https://www.toymoban.com/news/detail-522310.html

到了这里,关于在Vue3的setup中如何使用this的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 setup中使用$refs

    在 Vue 3 中的 Composition API 中, $refs 并不直接可用于 setup 函数。这是因为 $refs 是 Vue 2 的实例属性,而在 Vue 3 中, setup 函数是与模板实例分离的,不再使用实例属性。 实际工作中确实有需求,在 setup 函数使用$refs,下面有两种方法。 方案一:getCurrentInstance 方案二: ref 在这

    2024年02月12日
    浏览(34)
  • vue3之setup的基本使用

    setup是一个全新的配置项,值是一个函数,既然是配置项,是否与data、methods是兄弟? 没错,确实是兄弟关系,只不过到了vue3,就不怎么使用data这些配置项,会使用setup,让我为大家简单的介绍一下setup吧! setup是 Composition API ,组件中所用到的数据方法等等均配置在 setup 中

    2024年02月22日
    浏览(40)
  • vue3的setup的使用和原理解析

    最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用的阶段,但是setup带来哪些改变,以及ref,reactive这两api内部实现原理到底是什么,

    2024年02月02日
    浏览(37)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(53)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(48)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • vue3自定义dialog createApp setup语法组件使用element

    目录  index.vue mapDialog.js

    2024年02月14日
    浏览(45)
  • vue3的setup函数中定义data数据,使用data数据

    vue3保留了vue2的语法,但是不能混着用,setup中定义原有vue2中data数据的方法有所改变 直接上代码 对比原有vue2代码 data() {             return {                 name: \\\"张三\\\",                 age:18             }     } 在setup函数中使用数据也无需 this.xxx, 而是用你定义的名字

    2024年02月12日
    浏览(38)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • vue3 setup语法糖 使用组件内的路由守卫beforeRouteEnter使用方法

    由于beforeRouteEnter在setup语法糖中是无法使用的,所以需要再起一个script标签 使用defineComponent方式来使用就可以了

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包