vue中ref知识笔记

vue中通过ref获取页面dom元素，刚开始我以为如果页面有多个相同的ref，那么$refs获取的是dom数组。但实际不是那么回事。只有通过v-for循环元素绑定的ref才是数组，如果分开绑定则获取的只是最后一个ref。

<template>
  <div>
    <div ref="refElement">ref1</div>
    <div ref="refElement">ref2</div>
    <div ref="refElement">ref3</div>
    <div ref="refElement">ref4</div>
    <div ref="refElement">ref5</div>
    <div ref="refElement">ref6</div>

    <div v-for="i in 6" :key="i" ref="vForElement">v-for ref{{ i }}</div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.refElement);
    console.log(this.$refs.vForElement);
  }
};
</script>

 第一个console获取的只是ref6，循环获取的才是数组。mark一下。