「自学哈网」VUE中的$refs怎么用?
也想出现在这里?
联系我们吧
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]。
3、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期
mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
4、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要
循环就可以了。
本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」VUE中的$refs怎么用?
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」VUE中的$refs怎么用?
也想出现在这里?
联系我们吧