vue通过ref访问 DOM

从Vue2到Vue3升级：el-upload组件的引用与方法更新,

原创已于 2024-04-07 09:48:55 修改 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-04-07 09:41:34 首次发布

本文比较了Vue2和Vue3中使用el-upload组件的方法，介绍了在不同版本中如何管理文件上传和清除，以及官方文档中相关组件方法的使用。

vue2写法

<el-upload ref="uploadZL" :action="uploadURL" :on-success="handleUploadSuccess"
:on-remove="handleUploadRemove">

this.$refs['uploadZL'].clearFiles();

vue3+ts写法

<el-upload ref=uploadZL :action="uploadURL" :on-success="handleUploadSuccess" 
:on-remove="handleUploadRemove" >

const uploadZL=ref(null);

uploadZL.value.clearFiles();

以el-upload组件为例，官方文档中el-upload组件下有以下方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

昆山农民

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue实现手动文件上传

目标架构师

05-21

1002

Vue实现手动文件上传

Vue3 ref 模拟触发点击事件此次用于模拟点击el upload 的上传

qq_39581137的博客

04-19

8533

由于vue2和vue3的ref使用不一样，经过控制台打印等一系列操作最终寻找到可以利用 triggerRef.value?.$.vnode.el?.click()这句来模拟点击

2 条评论您还未登录，请先登录后发表或查看评论

04-Vue：ref获取页面节点--很简单

weixin_48053866的博客

05-21

1502

在Vue中，通过 ref 属性获取DOM元素，我们当然可以使用JS原生的做法（document.getElementById）或者 jQuery 来获取DOM，但是这种做法却在无形中操作了DOM，在Vue框架中并不推荐这种做法。我们可以通过`ref`属性获取DOM元素。 `ref`的英文单词是**reference**，表示**引用**。我们平时可以经常看到控制台会报错**referenceError**的错误，就和引用类型的数据有关。

Vue3 el-upload + WebAPI实现上传

Admans的专栏

09-19

2811

【代码】Vue3 el-upload + WebAPI实现上传。

如何在Vue3中使用Ref访问DOM元素

有我更精彩的博客

07-08

9033

ref在 Vue 3 中，ref是一个函数，用来创建一个可响应的引用对象。这个对象可以在模板中绑定到 DOM 元素，从而在组件的逻辑代码中方便地访问和操作这些元素。在 Vue 3 中，ref提供了一种简单而强大的方式来访问 DOM 元素和创建响应式数据。通过本文的介绍和示例代码，你应该对如何使用ref访问和操作 DOM 元素有了清晰的理解。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作。

vue3 ref 获取标签 dom

秋来九月八

07-06

6453

在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。ref 允许你在 Vue 组件中获取对特定 DOM 元素或子组件实例的引用，以便可以进行以下操作：直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。这对于需要直接操作 DOM 元素的情况非常有用，例如，动态改变样式、内容或绑定事件。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。

vue 3.0 使用ref获取dom元素

热门推荐

好巧的博客

09-24

14万+

答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null。当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。// 存储dom数组。

vue3 ref 获取 DOM元素

weixin_42288889的博客

05-25

391

【代码】vue3 ref 获取 DOM元素。

vue3 setup 通过ref访问dom元素

FantasyWeirdo的博客

07-28

713

/ 初始值需要赋值为空，或者null, 变量名一定要和模版中的ref一致。// 此时在mounted周期中可以访问到ref。

Vue3 通过ref获取DOM结点

qq_59181609的博客

04-21

1万+

一；获取单个绑定了ref属性的标签结点 1.给想要获取DOM元素的标签加上 ref 属性，并自定义一个名称 2.在 setup 中使用 ref 声明一个变量名与标签中 ref 属性名称相同的变量 3.之后这个 ref 所定义的变量中存储的就是 ref 属性标记了的元素结点。 ...

精选资源

在Vue中使用ref获取dom元素节点及组件内的数据和方法

01-20

对于Vue组件，`ref`的使用方式与DOM元素类似，但此时的`$refs`返回的是组件实例，我们可以直接访问组件的数据和方法。例如，我们有以下登录组件（`login`）： ```javascript var login = { template: "Login", ...

vue中使用refs定位dom出现undefined的解决方法

11-29

Vue.js 是一个流行的前端框架，它提供了一种方便的方式来创建可复用的组件，并通过`refs`属性来直接引用组件内部的DOM元素或组件实例。然而，在实际开发中，有时我们在`mounted()`生命周期钩子中尝试访问`this.$refs...

vue获取dom元素注意事项

08-28

vue获取DOM元素注意事项 vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？首先，我们需要了解vue的...

计算机毕业设计|基于springboot + vue在线考试管理系统(源码+数据库+文档)

12-07

865

本文介绍了一个基于SpringBoot+Vue的在线考试管理系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细说明了系统设计原则、技术选型理由，并提供了功能演示视频、代码示例和测试用例。此外，还包含毕业设计选题推荐和源码获取方式。该系统具有用户友好的界面设计、完善的安全机制和良好的扩展性，适合作为计算机相关专业的毕业设计项目参考。

Vue二级弹窗关闭错误解决指南