Vue的特性(二)：ref的作用及適用場景

ref

預期：string

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。

• 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
• 如果用在子組件上，引用就指向組件實例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。

關於 ref 註冊時間的重要說明

因爲 ref 本身是作爲渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。

訪問子組件實例或子元素

儘管存在 prop 和事件，有的時候你仍可能需要在 JavaScript 裏直接訪問一個子組件。爲了達到這個目的，你可以通過 ref 特性爲這個子組件賦予一個 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

現在在你已經定義了這個 ref 的組件裏，你可以使用：

this.$refs.usernameInput

來訪問這個 實例，以便不時之需。比如程序化地從一個父級組件聚焦這個輸入框。在剛纔那個例子中，該 <base-input> 組件也可以使用一個類似的 ref 提供對內部這個指定元素的訪問，例如：

甚至可以通過其父級組件定義方法：

methods: {
  // 用來從父級組件聚焦輸入框
  focus: function () {
    this.$refs.input.focus()
  }
}

這樣就允許父級組件通過下面的代碼聚焦 <base-input> 裏的輸入框：

this.$refs.usernameInput.focus()

當 ref 和 v-for 一起使用的時候，你得到的引用將會是一個包含了對應數據源的這些子組件的數組。

$refs 只會在組件渲染完成之後生效，並且它們不是響應式的。這僅作爲一個用於直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。