vue2升级vue3:getCurrentInstance—Composition api/hooks中如何获取$el
在vue2中,我们进程看到 this.$el 操作。但是在vue3 如何获取组件的当前 dom 元素呢? 可以利用 getCurrentInstance
getCurrentInstance
Vue3.x中的核心方法:getCurrentInstance,用于 获取当前组件的实例、上下文来操作router和vuex等。
import { getCurrentInstance } from 'vue';
// 获取当前组件实例
const instance = getCurrentInstance(); // 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。
const { ctx } = getCurrentInstance(); // 方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
const { proxy } = getCurrentInstance(); // 方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
// ctx 中包含了组件中由ref和reactive创建的响应式数据对象,以及以下对象及方法;
proxy.$attrs
proxy.$data
proxy.$el
proxy.$emit
proxy.$forceUpdate
proxy.$nextTick
proxy.$options
proxy.$parent
proxy.$props
proxy.$refs
proxy.$root
proxy.$slots
proxy.$watch
vue2升级vue3:getCurrentInstance—Composition api/hooks中如何获取$el的更多相关文章
- vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件
如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...
- vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9
项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...
- vue2升级vue3指南(二)—— 语法warning&error篇
本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和 ...
- vue2升级vue3:vue-i18n国际化异步按需加载
vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage 但是本文还是详细说一遍: 为什么需要异 ...
- Vue3全家桶升级指南一composition API
1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...
- uniapp项目vue2升级vue3简单记录
看到好多开源项目都升级了vue3,看文章说vue3性能升级很多,而且组合式api很香,遂把最近开发的自助洗车app升级下,在此记录下出现的问题. uniapp升级vue3官方指南 我是先去vue官网看 ...
- 学习 vue3 第一天 vue3简介,创建vue3项目 Composition Api 初识
前言: 从今天开始来和大家一起学习 vue3 相信大家都不陌生,已经火了一段时间了,但是还是有不少人没有学习,那就跟着六扇老师来简单的入个门 废话不多说,来开始今天的学习 Vue3 简介: 2020年 ...
- 好久没发文了,一篇Vue3的Composition API使用奉上
Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...
- vue2升级vue3指南(一)—— 环境准备和构建篇
1.nodejs和npm 注意二者的版本,版本过低需要升级,本人升级后的版本如下: $ node -v v16.15.1 $ npm -v 8.11.0 2.package.json 和依赖升级 由于 ...
- vue3.0 composition API
一.Setup函数 1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy 2.this指向:不会指向组件实例 3.参数 ...
随机推荐
- 模拟退火算法(SA)
求某个目标函数的最值 爬山法 首先我们通过爬山法来引出模拟退火算法 我们先看一个例子:求函数的最值 我们用爬山法解决这个问题的步骤 1.在解空间中随机生成一个初始解(图中小黄点就是我们生成的初始解) ...
- nginx、rabbitmq、redis、zookeeper、zkui安装脚本
nginx安装脚本 #!/bin/bash yum install -y wget pcre-devel openssl openssl-devel gcc ###安装perl### cd /usr/ ...
- AGC 补题笔记
[AGC001] A.BBQ Easy 由于最大数肯定要和一个比自己小的数搭配保留该数,不如选择保留次大数,如此递归即解.因此将序列排序后输出序号为奇数的数即可. B.Mysterious Light ...
- HTTP 和 RPC 的区别
一句话概括 RPC代表:Feign.Dubbo RPC 主要用于公司内部的服务调用,性能消耗低,传输效率高,服务治理方便. HTTP 代表:RestTemplate.HttpClient HTTP 主 ...
- 二叉树、平衡二叉树、红黑树、B树、B+树
几种树的主要区别: 红黑树为二叉自平衡搜索树,深度大,多用于内存排序: B树为多路(多叉)搜索树,深度低,搜索数据时磁盘IO较少,多用于索引外存数据,只支持随机访问,不支持顺序访问: B+树是对B树的 ...
- 标子查询优化和改写SQL案例
京华开发一哥们找我优化条报表SQL,反馈执行时间很慢需要 18s 才能出结果,安排. -- 原SQL SELECT 2 AS TYPE, to_char(a."create_time&quo ...
- python 执行脚本,并将输出打印到文件
转载请注明出处: 在使用 python 直接执行脚本时,执行的相关输出会打印到当前的控制台,如果想输出到指定的文件,可以采用以下几种方式: 1.在启动时,使用 > 操作符,该操作符会将输出写入到 ...
- 不懂乐理,也能扒谱,基于openvpi将mp3转换为midi乐谱(Python3.10)
所谓"扒谱"是指通过听歌或观看演奏视频等方式,逐步分析和还原音乐作品的曲谱或乐谱的过程.它是音乐学习和演奏的一种常见方法,通常由音乐爱好者.乐手或学生使用. 在扒谱的过程中,人们会 ...
- LabVIEW基于机器视觉的实验室设备管理系统(5)
目录 行动计划 设备借用 判断设备ID是否正确.设备是否在库 判断是否为已注册用户.电话是否正确 借出设备 设备归还 信息查询 判断ID是否正确.选择设备状态 效果演示 今天这一期,我们就来完成实验 ...
- Cadence SPB 22.1 --学习基础01Day
1.电路图设计 ①.原理图设计 原理图符号-->原理图库:代替实际电子元器件的符号,主要就是引脚数目.引脚序号与实物对应: ②.PCB设计 PCB符合-->PCB封装库:电子元器件的各种实 ...