当前位置: 首页 > news >正文

vue2的$el.querySelector在vue3中怎么写

这个也属于直接操作 dom 了,不建议在项目中这样操作,不过我是在vue2升级vue3的时候遇到的,是以前同事写的代码,也没办法

先来看一下对比

在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 ref=xxx 的实例,并且实例上面的$el存在 querySelector 方法,看一下 vue2 的组件代码:

<template><div><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogref="dialogInstance"title="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"@opened="handlerOpen"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template>
<script>
export default {data() {return {dialogVisible: false,}},methods: {handlerOpen() {console.log(this.$refs.dialogInstance.$el.querySelector, 'lll')},handleClose(done) {this.$confirm('确认关闭?').then((_) => {done()}).catch((_) => {})},},
}
</script>

此时当弹出那个出现时,是能看到这个方法的

在vue3中我们获取实例是通过 const xxxInstance = ref(xxx) 获取绑定属性 ref=xxx 的实例,但是在 xxxInstance.value.$el 上面却找不到 querySelector 方法,来看一下代码:

<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"class="sdf"@opened="handleOpen"ref="dialogInstance"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'const dialogInstance: any = ref(null)
const dialogVisible = ref(false)const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.querySelector, 'qqqq')
}const handleClose = (done: () => void) => {done()
}
</script>

输出

具体原因我也不知道,不过我在 $el 的 nextElementSibling 属性中找到了 querySelector 方法,并且可以使用

const handleOpen = () => {console.log(dialogInstance.value.$el, '///')console.log(dialogInstance.value.$el.nextElementSibling.querySelector,'ertert')
}

总结:

在 vue3 中如果要像 vue2 一样使用 $el.querySelector 的时候,使用 $el.nextElementSibling 的 querySelector

相关文章:

vue2的$el.querySelector在vue3中怎么写

这个也属于直接操作 dom 了&#xff0c;不建议在项目中这样操作&#xff0c;不过我是在vue2升级vue3的时候遇到的&#xff0c;是以前同事写的代码&#xff0c;也没办法 先来看一下对比 在vue2中获取实例是直接通过 this.$refs.xxx 获取绑定属性 refxxx 的实例&#xff0c;并且…...

GPSd定时检测保活TCP GPS源

为了在 TCP GPS 源丢失连接时自动重新连接&#xff0c;可以编写一个监控脚本&#xff0c;定期检查 gpspipe 输出中的 TCP 源数据是否存在。如果检测到丢失&#xff0c;则使用 gpsdctl 或直接命令重新添加 TCP 源。 1、工具 检查并安装必要工具&#xff0c;本例需要使用 gpspi…...

IDEA中Maven使用的踩坑与最佳实践

文章目录 IDEA中Maven使用的踩坑与最佳实践一、环境配置类问题1. Maven环境配置2. IDEA中Maven配置建议 二、常见问题与解决方案1. 依赖下载失败2. 依赖冲突解决3. 编译问题修复 三、效率提升技巧1. IDEA Maven Helper插件使用2. 常用Maven命令配置3. 多模块项目配置4. 资源文件…...

使用 Python 调用 OpenAI 的接口初识

使用 Python 调用 OpenAI 的接口非常简单&#xff0c;以下将结合实际代码示例和使用场景进行详细讲解&#xff0c;步骤如下&#xff1a; 文章目录 1. 安装 OpenAI 官方库2. 准备 API Key3. 基本使用示例&#xff1a;调用 ChatGPT**代码示例&#xff1a;****运行结果&#xff1a…...

2025 最新flutter面试总结

目录 1.Dart是值传递还是引用传递&#xff1f; 2.Flutter 是单引擎还是双引擎 3. StatelessWidget 和 StatefulWidget 在 Flutter 中有什么区别&#xff1f; 4.简述Dart语音特性 5. Navigator 是什么&#xff1f;在 Flutter 中 Routes 是什么&#xff1f; 6、Dart 是不是…...

【MQ】RabbitMq的可靠性保证

消息队列中的可靠性主要是分为三部分&#xff1a; 消息不丢失&#xff1a;确保消息从生产者发送到消费者消息不丢失消息不重复&#xff1a;确保消息不被重复消费消息顺序性&#xff1a;确保消费的顺序性 解决方案主要有以下几部分&#xff1a; 消息不丢失 生产者确认机制持久…...

STM32 GPIO配置 点亮LED灯

本次是基于STM32F407ZET6做一个GPIO配置&#xff0c;实现点灯实验。 新建文件 LED.c、LED.h文件&#xff0c;将其封装到Driver文件中。 双击Driver文件将LED.c添加进来 编写头文件&#xff0c;这里注意需要将Driver头文件声明一下。 在LED.c、main.c里面引入头文件LED.h LED初…...

Flink把kafa数据写入Doris的N种方法及对比。

用Flink+Doris来开发实时数仓,首要解决是如何接入kafka实时流,下面是参考Doris官方文档和代码,在自己项目开发的实践中总结,包括一些容易踩坑的细节。 目录 Routine Load方法 接入kafka实时数据 踩坑的问题细节 Flink Doris Connector方法 完整示例 Routine Load方法…...

Vue - 标签中 ref 属性的使用

在 Vue 3 中&#xff0c;ref 属性用于在模板中引用 DOM 元素或组件实例。通过 ref&#xff0c;可以直接访问这些元素或组件的实例&#xff0c;从而进行更复杂的操作&#xff0c;比如获取元素的尺寸、调用组件的方法等。 基本语法&#xff1a; <template><div ref&qu…...

leetcode-不同路径问题

一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的路径&#xff1f; 看见题目…...

MongoDB 数据库备份和恢复全攻略

在当今数据驱动的时代&#xff0c;数据库的稳定运行和数据安全至关重要。MongoDB 作为一款流行的 NoSQL 数据库&#xff0c;以其灵活的文档模型和高扩展性备受青睐。然而&#xff0c;无论数据库多么强大&#xff0c;数据丢失的风险始终存在&#xff0c;因此掌握 MongoDB 的备份…...

CentOS7使用源码安装PHP8教程整理

CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…...

Baklib助力内容中台实施的最佳实践与成功案例探索

内容概要 在当今数字化发展的背景下&#xff0c;内容中台的概念逐渐受到重视。内容中台不仅仅是一个技术平台&#xff0c;更是企业在内容管理和运营效率提升方面的重要助力。它通过整合内部资源&#xff0c;实现信息的集中管理与高效利用&#xff0c;帮助企业应对日益复杂的市…...

rocketmq-product-send方法源码分析

先看有哪些send方法 首先说红圈的 有3个红圈。归类成3种发送方式。假设前提条件&#xff0c;发送的topic&#xff0c;有3个broker&#xff0c;每个broker总共4个write队列&#xff0c;总共有12个队列。 普通发送。负载均衡12个队列。指定超时时间指定MessageQueue,发送&#…...

python flask中使用or查询和and查询,还有同时使用or、and的情况

在 Flask 中处理数据库查询时&#xff0c;通常会结合使用 ORM 工具&#xff0c;例如 SQLAlchemy。以下是 or 查询、and 查询以及两者同时使用的示例。 文章目录 基础准备1. 使用 or_ 查询2. 使用 and_ 查询3. 同时使用 or_ 和 and_4. 更加复杂的嵌套查询 基础准备 假设有一个…...

【第一天】零基础入门刷题Python-算法篇-数据结构与算法的介绍(持续更新)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.基本概念2.Python中的数据结构1. 列表&#xff08;List&#xff09;2. 元组&#xff08;Tuple&#xff09;3. 字典&#…...

租房管理系统实现智能化租赁提升用户体验与运营效率

内容概要 在当今快速发展的租赁市场中&#xff0c;租房管理系统的智能化转型显得尤为重要。它不仅帮助房东和租客之间建立更高效的沟通桥梁&#xff0c;还优化了整个租赁流程。通过智能化技术&#xff0c;这套系统能够自动处理资产管理、合同签署、财务管理等所有关键环节。这…...

python3+TensorFlow 2.x(四)反向传播

目录 反向传播算法 反向传播算法基本步骤&#xff1a; 反向中的参数变化 总结 反向传播算法 反向传播算法&#xff08;Backpropagation&#xff09;是训练人工神经网络时使用的一个重要算法&#xff0c;它是通过计算梯度并优化神经网络的权重来最小化误差。反向传播算法的核…...

Flutter 使用 flutter_inappwebview 加载 App 本地 HTML 文件

在 Flutter 开发中&#xff0c;加载本地 HTML 文件是一个常见的需求&#xff0c;尤其是在需要展示离线内容或自定义页面时。flutter_inappwebview 是一个功能强大的插件&#xff0c;支持加载本地文件和网络资源。本文将详细介绍如何使用 flutter_inappwebview 加载 App 本地 HT…...

Word常见问题:嵌入图片无法显示完整

场景&#xff1a;在Word中&#xff0c;嵌入式图片显示不全&#xff0c;一部分图片在文字下方。如&#xff1a; 问题原因&#xff1a;因段落行距导致 方法一 快捷方式 选中图片&#xff0c;通过"ctrl1"快捷调整为1倍行距 方法二 通过工具栏调整 选中图片&#xff0…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...