vue3提供了getCurrentInstance ，通过这个属性，直接使用ctx是错误的，需要找到全局属性globalProperties

import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

const _this= instance.appContext.config.globalProperties

这里的_this就相当于vue2里的this

方案2:

const { proxy } = getCurrentInstance()

使用proxy线上也不会出现问题

Vue3中如何使用this的更多相关文章

  1. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  2. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  3. 端午总结Vue3中computed和watch的使用

    1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...

  4. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  5. 在vue3中使用router-link-active遇到的坑

    在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...

  6. Vue3中的响应式对象Reactive源码分析

    Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍,在本文中不做赘述 本 ...

  7. Vue3中插槽(slot)用法汇总

    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用 ...

  8. vue3中defineComponent 的作用

    vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeSc ...

  9. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

  10. vue3中$attrs的变化与inheritAttrs的使用

    在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...

随机推荐

  1. vue2.0，把vform666、workFlow开源组件集成到vue-admin-template框架上心得体会

    以上三个都是vue2版本的开源项目,有的已经有vue3版本了,我把他们集成到一起,是出于练习的目的,也是消磨时间. vue-admin-template是一个很基础简洁的后台管理系统框架:vform6 ...

  2. C# 使用 运算符重载 隐式转换 对Point进行加减计算

    运算符重载方便了我们对自定义类型(自定义的类或者结构体)的计算. 运算符重载关键字 operator. 除了这些运算符不支持:x.y.f(x).new.typeof.default.checked.u ...

  3. CSS——动画

    @keyframes 规则 要创建 CSS 动画,您首先需要了解 @keyframes 规则,@keyframes 规则用来定义动画各个阶段的属性值,类似于 flash 动画中的关键帧,语法格式如下: ...

  4. Flutter(三)：Flutter App 可行性分析

    一.生态建设 第三方Package https://pub.dev/packages?sort=popularity 截止2021年4月,第三方库达到17000+ 二.Devops 代码风格检查 An ...

  5. nginx aio模块添加与配置

    1. 升级目的 让现有服务平滑过渡到高版本,减少服务漏洞,提高服务性能 让其支持nginx最新特性 nginx threads模块 2. 获取nginx1.7.2版本 wget http://ngin ...

  6. 用.NET代码生成JSON Schema 验证器

    问题 对于验证复杂JSON数据是否合法的需求,通常的解决方式是标准JSON Schema,.Net下有对应的JSON Schema实现库.应用程序通常需要将标准JSON schema传入实现库,来做后 ...

  7. wordpress博客系统报错

    第一种,只显示nginx的默认网页 说明wordpress的网页配置文件没有被系统读取 我们就需要去查看nginx的配置文件/etc/nginx/conf.d/default.conf 首先,查看是不 ...

  8. this的二种使用方式

    package com.ht.TestThis; public class TestThisKey { public static void main(String[] args) { // TODO ...

  9. System.lineSeparator()行分隔符的用法

    System.lineSeparator()具体含义 从JDK的源码中,可以看出:它是从JDK1.7之后开始有的这个方法. 在UNIX系统下,System.lineSeparator()方法返回&qu ...

  10. Go变量作用域精讲及代码实战

    关注作者,复旦AI博士,分享AI领域与云服务领域全维度开发技术.拥有10+年互联网服务架构.AI产品研发经验.团队管理经验,同济本复旦硕博,复旦机器人智能实验室成员,国家级大学生赛事评审专家,发表多篇 ...