VUE中$refs的基本用法

最新推荐文章于 2024-04-26 17:54:13 发布

沅霖

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量456

点赞数

文章标签： vue.js

原文链接：https://blog.csdn.net/m0_62823653/article/details/124767261

版权

ref 有三种用法：
　1、ref 加在普通的元素上，用this. $re f s . （ re f 值）获取到的是 d o m 元素。 2 、 re f 加在子组件上，用 t hi s .$ 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 只需要

循环就可以了。
————————————————
版权声明：本文为CSDN博主「一个好好的程序员」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_62823653/article/details/124767261