【Vue.js】ref属性でマーキングしたコンポーネントを$refsで取得

生成されたコンポーネントを取得できる$refs

取得したいコンポーネントのタグ内に、ref属性を付与することでマーキングし、
実際に$refsでマーキングしたコンポーネントを取得できる。

注意点

もちろんすでにレンダリングされたコンポーネントを取得するので、VueライフサイクルにおけるbeforeMount以下のプロパティ内では使用することはできない。

Vueのライフサイクルについてはこちら

コンポーネントを特定させる

<template>
  <v-container ref="hoge">
  ・・・
  </v-container>
</template>


<script>
    let hogeComponent = this.$refs.hoge
</script>

特定したい要素にref属性を付与して、実際の処理する時の対象指定として$refsを使用して特定させる。

配列の要素による、コンポーネントも特定させることができる

<template>
  <v-container>
    <v-row>
      <v-col v-for="item in items" ref="hoge">
      </v-col>
    </v-row>
  </v-container>
</template>


<script>
    let item1 = this.$refs.hoge[0]
</script>

ref属性の配列の要素の中でも、0番の要素だけを取得できる。