More than 3 years have passed since last update.

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

Posted at 2020-12-17

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

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

##実装方法
今回はインプットフォームにフォーカスさせる

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

<input ref="input">

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

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

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