【Vue】當前單文件組件中有多個相同的ref="test"時，this.$ref.test取到的是哪一個

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。

1. 當同一組件內部，有多處ref引用值相同的情況時，this.$refs[ref名稱]指向文檔流中靠下的組件或DOM節點，若是ref相同的組件或DOM節點間是父子關系，則指向父級組件或DOM節點；

this.$refs[ref名稱]指向文檔流中靠下的組件或DOM節點：

<template>
  <el-container>
    <el-header ref="test1">
      <el-row ref="test1"></el-row>
    </el-header>
    <el-tooltip :key="item.id" ref="test1" v-for="(item) in items" :content="item.text"></el-tooltip>
    <div class="test" ref="test"></div>
  </el-container>
</template>

this.$refs.test1指向：

 

 

 若是ref相同的組件或DOM節點間是父子關系，則指向父級組件或DOM節點：

<template>
  <el-container>
    <el-header ref="test1">
      <el-row ref="test1"></el-row>
    </el-header>
  </el-container>
</template>

this.$refs.test1指向：

 

2. 若ref用在v-for里，當循環內的ref值不同時，需提供this.$refs[ref名稱][0]來獲取該DOM節點或組件實例；當ref值相同時，this.$refs[ref名稱]獲取到的是該DOM節點或組件的數組。

當循環內的ref值不同時，需提供this.$refs[ref名稱][0]來獲取該DOM節點或組件實例：

<template>
  <el-container>
    <el-header ref="test1">
      <el-row ref="test1"></el-row>
    </el-header>
    <el-tooltip :key="item.id" :ref="'test'+index" v-for="(item,index) in items" :content="item.text"></el-tooltip>
  </el-container>
</template>

this.$refs.test1指向以下Vue組件的數組：

 

 

 當ref值相同時，this.$refs[ref名稱]獲取到的是該DOM節點或組件的數組：

<template>
  <el-container>
    <el-header ref="test1">
      <el-row ref="test1"></el-row>
    </el-header>
    <el-tooltip :key="item.id" ref="test1" v-for="(item) in items" :content="item.text"></el-tooltip>
  </el-container>
</template>

this.$refs.test1指向：