技術標籤：vuerefs

Vue官方文件： ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項。

1 當同一組件內部，有多個同名ref引用時

this.$refs[ref名稱]指向文件流中靠下的元件或DOM節點，若是ref相同的元件或DOM節點間是父子關係，則指向父級元件或DOM節點。

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

<template>
	<div class="container"
 
>
      <div class="form" ref="test">
        <el-input ref="test"></el-input>
      </div>
      <el-row ref="test"></el-row>
    </div>
</template>

this.$refs.test 指向：

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

<
 
template>
	<div class="container">
      <div class="form" ref="test">
        <el-input ref="test"></el-input>
      </div>
    </div>
</template>

this.$refs.test 指向：

2 若ref用在v-for裡

當迴圈內的ref值不同時，需提供this.refs[ref名稱][0]來獲取該DOM節點或元件例項；當ref值相同時，this.$refs[ref名稱]獲取到的是該DOM節點或元件的陣列。

2.1 當迴圈內的ref值不同時，需提供this.$refs[ref名稱][0]來獲取該DOM節點或元件例項：

<template>
	<div class="container">
      <div class="form" ref="test">
        <el-input ref="test"></el-input>
      </div>
      <el-row v-for="item in 5" :key="item" :ref="'test' + item"></el-row>
    </div>
</template>

this.$refs.test1 指向，可以看到它控制檯中打印出是一個數組，只有一項即時引用指向的節點或元件

2.2 當寫死ref，值相同時，this.$refs[ref名稱]獲取到的是該DOM節點或元件的陣列：

<template>
	<div class="container">
      <div class="form" ref="test">
        <el-input ref="test"></el-input>
      </div>
      <el-row v-for="item in 5" :key="item" ref="test"></el-row>
    </div>
</template>

this.$refs.test 的指向，是同名DOM節點的陣列，使用下表即可獲取響應DOM節點或元件

3 使用注意事項

• ref 屬性值接收一個字串
• 因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在

created () {
    console.log('test')
    console.log(this.$refs.test)
}

this.$refs.test 為 undefined，在mounted中可以訪問

• 並且它不是響應式的。這僅作為一個用於直接操作子元件的“逃生艙”——你應該避免在模板進行資料繫結或計算屬性中訪問 $refs。