文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

VUE中$refs的基本用法举例

2022-12-19 18:00

关注

ref 有三种用法:

 1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素。

 2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。

         在使用方法的时候直接this.$refs.(ref值).方法() 就可以使用了。

 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点。

第一种用法举例

<template>
 <div>
   <h2>refs</h2>
   <input ref="inp" type="text" />
 </div>
</template>
<script>
export default {
 //ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
created() {
 // 在生命周期created中可以查询到变量,但是dom还未渲染完成,
    需要借助this.$nextTick(()=>{})
 this.$nextTick(() => {
 console.log(this.$refs.inp);
  });
 },
};
</script>

应注意的坑:

1、如果通过v-for 遍历想加不同的ref时记得加 :号,

即 :ref =某变量 ;这点和其他属性一样,如果是固定值就不需要加 :号,如果是变量记得加 :号。

(加冒号的,说明后面的是一个变量或者表达式;没加冒号的后面就是对应的字符串常量

(String))

2、通过 :ref =某变量 添加ref(即加了:号) ,如果想获取该ref时需要加 [0],如

this.$refs[refsArrayItem] [0];如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加,如

this.$refs[refsArrayItem]。

1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期

mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要

循环就可以了。

扩展知识点

vue---$refs的用法【详解】

在用VUE开发项目的时候,经常会使用到$refs来操作DOM,那么它究竟该怎么使用呢?

首先,平时在用JS开发项目的时候,获取DOM元素,使用的是 document.querySelector("#id") 来获取DOM元素,并且可以操作或获取其属性,例如获取 input 的 value 值。

如果是使用VUE,可以使用 ref 来进行绑定,就不需要获取DOM节点了,然后通过 $refs 来进行操作或获取属性。

例如使用 JavaScript 里面通过 this.$refs.input1 去调用,这样的做法实际上是访问VUE虚拟出来的DOM,可以有效减少获取/操作DOM节点的性能消耗。

示例:

<div id="app">
  <input type="text" ref="input1" />
  <button @click="add">添加</button>
</div>

代码:

add:function(){
  // this.$refs[input1].value = "test"; // 可以用运算符去访问
  this.$refs.input1.value = "test"; // 有效减少获取dom节点的性能消耗
}

这里的 $refs 相当于是一个通用选择器,然后通过 key 去访问存储的对象。

到此这篇关于VUE中$refs的基本用法的文章就介绍到这了,更多相关VUE中$refs用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯