テンプレート参照について

このページは、すでにコンポーネントの基本を読んでいることを前提としています。コンポーネントを初めて使用する場合は、最初にそちらをお読みください。

プロパティやイベントが存在するにもかかわらず、 JavaScript で子コンポーネントに直接アクセスしなければならない場合があります。それを達成するために、ref 属性を使うことで子コンポーネントや HTML 要素に参照 ID を割り当てられます。例えば、以下のようになります:

<input ref="input" />

これは、例えば、コンポーネントのマウント時にプログラムで input をフォーカスさせたい時に便利です:

const app = Vue.createApp({})

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

また、別の ref をコンポーネント自体に追加し、それを使用して親コンポーネントからの focusInput イベントをトリガーできます:

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

this.$refs.usernameInput.focusInput()

WARNING

$refs は、コンポーネントがレンダリングされた後にのみ生成されます。これは、子要素を直接操作するための脱出ハッチとしてのみ意図されています。テンプレートや computed プロパティから $refs にアクセスするべきではありません。

こちらも参照してください: コンポジション API でテンプレート参照を使用する