1.简介
在vue2中,v-for绑定$refs将会自动生成一个refs的数组,但是在v-for中这种行为将会变得有歧义和不高效。 而在vue3中,这种用法就不会生效,因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组,那么就需要使用函数的方式手动去绑定。
2.vue2中的用法
<template>
<div>
<ul>
<!-- 绑定ref -->
<li v-for="(item, index) in list" :key="index" ref="liRef">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
list: [1, 2, 3],
};
},
components: {},
mounted() {
console.log("ref:", this.$refs.liRef);
},
};
</script>
打印出来的结果如下:
我们可以看到,在vue2中会自动生成refs数组。
3.vue3中的用法
如果我们还是使用vue2中的用法,将会得到如下结果:
这时我们可以看到,vue3并不会自动帮我们生成refs数组,只能得到最后一个元素的ref。如果我们需要在v-for中绑定ref并生成refs数组,则需要使用函数的方式手动绑定,用法如下:
<template>
<div>
<ul>
<!-- 绑定ref -->
<li v-for="(item, index) in list" :key="index" :ref="setItemRef">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
list: [1, 2, 3],
itemRefs: [],
};
},
methods: {
setItemRef(el) {
this.itemRefs.push(el);
},
},
beforeUpdate() {
this.itemRefs = [];
},
mounted() {
console.log("ref:", this.itemRefs);
},
updated() {
// console.log(this.itemRefs);
},
};
</script>
从代码中我们可以看到,ref绑定的是一个setItemRef函数,而setItemRef做的事情就是el push到itemRefs数组中,打印的结果如下:
现在的到的结果和vue2中的是相似的。
4.vue3 Array Refs的新特性
现在的itemRefs不一定是一个数组,它也可以是一个对象。
setItemRef(el) {
// this.itemRefs.push(el);
// data中的itemRefs需要定义为对象
let index = parseInt(Math.random(1) * 1000);
this.itemRefs[index] = el;
},
通过这样简单的实例改写方式,可以将itemRefs定义为一个对象。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!