Vue 3.0 模板引用

該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。

盡管存在 prop 和事件，但有時你可能仍然需要直接訪問 JavaScript 中的子組件。為此，可以使用 ref attribute 為子組件或 HTML 元素指定引用 ID。例如：

<input ref="input" />

例如，你希望以編程的方式 focus 這個 input 在組件上掛載，這可能有用

const app = Vue.createApp({})
app.component('base-input', {
  template: `
    <input ref="input" />
  `,
  methods: {
    focusInput() {
      this.$refs.input.focus()
    }
  },
  mounted() {
    this.focusInput()
  }
})

此外，還可以向組件本身添加另一個 ref，并使用它從父組件觸發(fā) focusInput 事件：

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

this.$refs.usernameInput.focusInput()

當(dāng) ref 與 v-for 一起使用時，你得到的 ref 將是一個數(shù)組，其中包含鏡像數(shù)據(jù)源的子組件。

WARNING

$refs 只會在組件渲染完成之后生效。這僅作為一個用于直接操作子元素的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問 $refs。

參考：在組合式 API 中使用 template refs