定義

1. 被用來給元素或是子組件註冊引用信息(id的替代者)
2. 應用在 html標籤元素獲取的是真實 DOM元素, 應用在組變標籤則是獲取組件實例對象 → VueComponent
3. 使用方式：

• 標籤內 →

<h1 ref="xxx"></h1>

• 獲取時 →

this.$refs.xxx

• 範例：(App.vue)

<template>
  <div id="app">
    <h1 ref="titleText">{{ title }}</h1>
    <Person ref="person" />
    <button @click="getElement">取得元素</button>
  </div>
</template>
<script>
import Person from './components/Person.vue'
export default {
  name: 'App',
  data() {
    return {
      title : '歡迎來到Vue'
    }
  },
  components: {
    Person
  },
  methods : {
    getElement(){
      console.log(this.$refs.titleText);
    }
  }
}
</script>

• Person.vue：

<template>
  <div>
    <h2>名稱：{{ person.name }}</h2>
    <h2>歲數：{{ person.age }}</h2>
    <h2>性別：{{ person.sex }}</h2>
  </div>
</template>
<script>
export default {
    name : 'Person',
    data() {
        return {
            person : {
                name : 'Adam',
                age : 24,
                sex : '男'
            }
        }
    }
}
</script>

HTML 標籤元素

按下按鈕取得元素 → 結果：

其結果跟 id是一樣的：

但要注意的是 ref跟 id還是不一樣的東西

組件標籤

將console.log 換成 → this.$refs.person
其結果就會不同：

但相對的若給予 person標籤 id並顯示在console
結果是：

會回傳的則是組件的真實 DOM元素

總結

為了能再父層取得到 VueComponent
會使用 ref標示個標籤, 另外的好處在於
比起 document.getElementById這樣的寫法
用 $refs的寫法可以精簡程式碼