vue中$refs的三种用法

我们都知道，在vue2中获取DOM元素，可以直接在元素上绑定ref属性，然后获取到DOM元素的属性值，这种方法在vue3 中仍然可以使用，但也会有一些问题。下面就介绍$refs的三种用法：

1、vue2中

在vue2中，我们可以直接使用ref获取元素，也就是直接在元素上绑定ref属性，在直接使用this.$refs[‘自定义属性名’] 就能直接获取。但是这样也是有一定风险的。因为ref绑定的在元素上，所以当元素没有进行渲染时，是不能通过ref获取到元素的。

<template><div><div ref="btn">我是一个按钮</div></div>
</template><script>export default {name: 'App',created() {//直接使用this.$refs获取DOM元素console.log(this.$refs.btn); // undefinedthis.$nextTick(() => {console.log(this.$refs.btn)  //获取到正确元素})},mounted() {console.log(this.$refs.btn); //获取到正确元素}
}
</script>

需要注意的是，在于vue2中使用这种方法获取v-for的元素时，获取到的是一个数组。

<template><div><div ref="btn" v-for="(item , index) in 3" :key="index">我是一个按钮</div></div>
</template><script>export default {name: 'App',mounted() {//获取到的是一个元素数组 console.log(this.$refs.btn); }
}
</script>

2、vue3中

在一般情况下，vue2的获取元素的方法在vue3也完全适用。

但是，有时候可能会遇到无法获取这个节点，原因是生命周期的问题，在vue3中原来的created没有了，而 setup 充当了原来的 created。所以在 setup 的时候，dom元素还没有被创建，只有setup完毕了之后HTML才能构建，这时才能真正访问到value值，所以自然就无法获取到dom节点，要想解决这个问题，就要配合钩子函数 onMounted ，在dom挂载完毕后再进行获取。

<template><div id="ref"><!--在元素上用 ref="butRef" 绑定--><button type="button" ref="butRef" >按钮元素</button></div>
</template><script>//引入refimport {ref, onMounted} from 'vue'export default {setup() {//需要先定义butReflet butRef = ref(null)onMounted(()=>{//使用的时候为 butRef.value（需要加点value获取DOM元素值）console.log(butRef.value);})return {butRef}}}
</script>

3、vue3的组合API（composition-api）

最后一种方法就是从上下文 Ctx（context）中解构构出 refs，虽然这里refs可能会提示已经被弃用，但是在这里仍然是可以用的。

<template><div id="ref"><button type="button" ref="butRef" >按钮元素</button></div>
</template><script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api';export default defineComponent({name: '',components: {},setup (props, ctx) {//从Ctx（context）中解构出 refsconst { emit, refs } = ctx;watch(filterText, (val) => {//在使用的时候直接用 refs.butRef//refs.butRef.filter(val);(refs.butRef as Any).filter(val);});return {butRef}}
}
</script>

vue中$refs的三种用法相关推荐

Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
vue父子组件的三种传值方式
vue父子组件的三种传值方式函数类型的props传值 //父组件 <template><Children :getChildName="getChildName" ...
using 的三种用法
using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...
static的三种用法，定义静态变量，静态函数，静态代码块！
static的三种用法,定义静态变量,静态函数,静态代码块! 1.定义静态变量 class PersonStatic { //静态变量的特点 //1.静态变量无需生成对象就可被调用,可以使用类名和对象 ...
SQL、LINQ、Lambda 三种用法(转)
SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA 1. 查询Student表中的所有记录的Sname.Ssex和Class列. select sna ...
标准SQL的update语句三种用法
标准SQL的update语句三种用法一.环境: MySQL-5.0.41-win32 Windows XP professional 二.建立测试环境: DROP TABLE IF EXIS ...
C++容器的insert()函数有以下三种用法: 最终*it=val;
C++容器的insert()函数有以下三种用法: 最终*it=val; //用法1:在指定位置it前"插入"值为val的元素,返回指向这个元素的迭代器, iterator inse ...
微课系列（6）：Python关键字else的三种用法
技术要点:Python关键字else在选择结构.循环结构和异常处理结构中的三种用法. ----------相关阅读---------- 教学课件 1900页Python系列PPT分享一:基础知识(10 ...
Python扩展库numpy中where()函数的三种用法
第一种用法:只给where()函数传递一个数组作为参数,返回其中非0元素的下标. 第二种用法:给where()函数传递一个包含True/False值的数组,返回该数组中True值的下标,结合numpy ...