[Vue.js]ref属性を使って子コンポーネントインスタンスと子要素へのアクセスする

はじめに

refを初めて使用したので、備忘録として残します

ref属性とは

プロパティとイベントが存在するにも関わらず、ときどき JavaScript で直接子コンポーネントにアクセスする必要がある。
その場合に ref 属性を使うと、子コンポーネントにリファレンス ID を割り当てることができる

実装方法

今回はインプットフォームにフォーカスさせる

①インプットフォームにref属性を付与する

<input ref="input">

②親によって使用されるメソッドを定義して親コンポーネントに 内部の input 要素にフォーカスさせる

methods: {
  // 親からインプット要素をフォーカスするために使われる
  focus: function () {
    this.$refs.input.focus()
  }
}

これらの実装でfocusメソッドが動いた時にrefを付与したインプットフォームにフォーカスされる

参考