this.$refs的使用

最新推荐文章于 2024-12-30 16:36:10 发布

原创最新推荐文章于 2024-12-30 16:36:10 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文讲解了如何在Vue中通过`ref`属性获取和操作DOM元素，包括在`<div>`标签上的基本用法，以及在`el-form`组件上的子组件引用。重点展示了在`handle()`方法中使用`this.$refs`获取对应元素并读取其innerHTML的方法。

ref写在标签上时，this.$refs.名字获取标签对应dom的元素

<div ref='hello' @click="handle()">
   login 
</div>

//获取对应dom元素
//methods:{
//    handle(){
//        console.log(this.$refs.hello.innerHTML)
//    }
//}

这个例子获取的是el-form标签对应的元素

ref写在组件上时，获取到的是子组件的引用

<el-form ref="submitForm" :v-model="submitForm" :rule="submitRules">

</el-form>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

refaker

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue 解决通过this.$refs来获取DOM或者组件报错问题

10-15

- **使用`this.$nextTick()`**：这是最常用的方法，将需要访问`this.$refs`的代码包裹在`this.$nextTick()`回调函数中，确保在DOM更新后执行。 ```javascript this.$nextTick(() => { this.$refs.name... // DOM...

vue列表单项展开收缩功能之this.$refs的详解

10-17

下面我们将深入探讨如何使用`this.$refs`以及在实现列表展开收缩功能时的关键步骤。首先，我们要明白`this.$refs` 的用法。在Vue模板中，我们可以在元素或组件上添加一个`ref`属性，它的值可以是字符串或对象。当...

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

$refs 模拟点击

Mao_mou的博客

01-30

2817

例子： <template> <div> <input type="file" ref="updata" /> <button @click=myClick>点我上传文件</button> </div> </template> <script> export default{ methods:{ myClick(){ this.$refs.updata.$el.click()

使用this.$refs.XXX修改某个元素样式并添加点击事件

weixin_43549976的博客

07-14

2531

使用this.$refs.XXX某个元素样式并添加点击事件 <el-form :model="form" label-position="left" :rules="dataFormRules" ref="form"> <el-row :gutter="36"> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-mod

vue 模拟事件

钱多多的博客

07-25

1337

vue 模拟单击事件第一步给元素添加 ref 第二步触发点击事件this.$refs.refName.$el.click(); this.$refs.refName.click() vue中给buttion按钮添加键盘回车（enter）事件一、给button按钮绑定@keyup.enter <div class="btn"> <Button t...

this.$refs使用方法

a_靖的博客

08-21

1万+

深入理解和使用this.$refs——Vue.js的利器

【vue父组件点击按钮触发子组件的事件】使用$refs动态的将父组件数据传递到子组件中

马云

10-21

1707

父传之使用$refs 父组件的button元素绑定click事件,该事件指向notify方法给子组件注册一个ref=“child” 父组件的notify的方法在处理时，使用了$refs.child把事件传递给子组件的parentMsg方同时携带着父组件中的参数msg 子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中父组件 <template> <div id="app">  <

this.$toast() 了解一下？

12-03

为了在全局范围内使用`this.$toast()`，我们需要在Vue实例的原型链上添加这个方法。首先，我们创建一个简单的`Toast`组件，如下所示： ```html  <p>{{ content }} export default { ...

Vue 报错TypeError: this.$set is not a function 的解决方法

10-17

在这个例子中，`$.ajax`的`success`回调函数中的`this`并没有指向Vue实例，而是指向了回调函数本身，因此无法调用`this.$set`。 ### 报错原因在JavaScript中，函数内部的`this`值取决于函数的调用方式。在上述...

Vue this.$refs的使用

热门推荐

可控的事情要谨慎，不可控的事情要乐观。

10-10

6万+

案例一、ref 写在标签上时  <div id="root">  ...

Vue 伪类触发$refs.file 的 click事件

weixin_39891473的博客

12-17

2458

1 前端在做 input file 美化的时候，通常把 input 定位position 到已美化的按钮最上方 opacity: 0 HTML5时代，已有更方便的方法，点击美化按钮直接触发选择文件事件 <el-button type="primary" @click="$refs.file.click()" >上传</el-button> <input type="file" id="el

Vue宝典之this.$refs属性

Kuangtian的博客

12-13

2721

在 Vue.js 中，refs 属性是用来引用组件或 DOM 元素的。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些元素或组件。在 Vue.js 中，refs 属性是一个非常有用的特性，它允许我们在组件中访问 DOM 元素和子组件实例。通过在模板中给元素或组件添加 ref 属性，我们可以在组件实例中使用 $refs 来访问这些引用。使用 refs 可以实现诸如操作 DOM 元素、调用子组件方法等功能。

Vue this.$refs获取DOM元素

u010234868的专栏

09-17

2438

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=".

Vue this.$refs的使用

qq_41451744的博客

10-11

3019

【示例】Vue this.$refs的使用。

elmetui在关闭弹窗使用 this.$refs[‘elForm‘].resetFields()方法重置表单不生效的原因及解决方法

Yhlhn的博客

06-25

913

当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。解决：在form上添加ref，需要与this.$ref['form'] 中名称一致。解决：prop属性需要与data绑定的属性一致。1.表单上没有添加ref属性。

使用$refs访问Vue中的DOM

xiaoyaopikaqiu的博客

02-28

669

在 Vue 的模板中的任何元素中可以添加 ref 属性，从而在 Vue 实例中引用这些元素，即访问 DOM 元素。 Vue 模板 <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">click here</button> &lt

Vue中 this.$refs用法

weixin_45476869的博客

12-30

1428

this.$refs是 Vue.js 中一个非常有用的实例属性，它用于直接访问组件模板中通过ref特性标记的 DOM 元素或子组件实例。

VUE中$refs的基本用法

很多时候犯错都是在不知情的情况下发生的

08-01

9553

ref 有三种用法：　　1、ref 加在普通的元素上，用this.$refs.（ref值）获取到的是dom元素　　2、ref 加在子组件上，用this.$refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（）就可以使用了。　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点应注意的坑： 1、如果通过v-for 遍历想加不同的ref时记得加:号，即:ref =某变量; 这点和其他属性一样...

this.$refs 使用