【vue】refsの使い方-クラスやIDよりも場合によっては便利に使用することができる使い方を紹介

refは使いようによってはIDやクラスよりも便利です。

getElementbyIdをいちいち書かなくて済みます！

classやidでよくないとなると思いますが、コンポーネントを使ったりするときなどでは、idが取得できないなど使い勝手が悪い時があります。

そういったときに役に立つのが、refになります。

vue refの記述法

結論、下記の記述で取るとこができます。

html(pug)

.section(ref="section1")

vue

this.$refs.section1

環境とバージョンについて

親、子コンポーネント間での値のやり取り

今回試すのは、親コンポーネントから子コンポーネントを参照し、特定要素の高さを取得するといった機能を作ります。

これは使う機会はないかもですが、使い方を理解するのに使って見てください。

まずは全体の各コンポーネントの全体のコードを見ていきます。

sample.vue(子コンポーネント)

<template lang="pug">
  .sample(ref="sample")
    h1 サンプル
</template>
<script>
  export default {
    data() {
      return {
        sample: 'sample',
      }
    },
  }
</script>

内容を参照するために作ったものなので中身は適当で大丈夫です。

準備しないと行けないのは、参照するデータ(ref="sample")です。

index.vue(親コンポーネント)

<template lang="pug">
  div
    .section(ref="section1")
      p section1の高さ：{{section1}}
      Sample(ref="reference")
    .section(ref="section2")
      p section2の高さ：{{section2}}
  </template>
  
  <script>
  export default {
    data() {
      return {
        scrollY: 0,
        section1: '',
        section2: '',
        sample: '',
      }
    },
    mounted() {
      this.getHeight()
    },
    methods: {
      getHeight() {
        this.section1 = this.$refs.section1.offsetTop
        this.section2 = this.$refs.section2.offsetTop
        this.sample = this.$refs.reference.$refs.sample.offsetTop
      },
    },
  }
  </script>

まずはコンポーネントを呼出す記述「Sample(ref="reference")」をします。

このときに子コンポーネントを参照できるように、refを設定しましょう。

あとは、普段のrefの記述と変わりません。

this.sample = this.$refs.reference.$refs.sample.offsetTop

子コンポーネントのrefを参照したい場合は、ドットつなぎで参照することができます。

vueはだいたいドットつなぎで値が取れるので便利ですね。

まとめ

refはidやclassでは実現できないことができます。

どのような場面で使うかは主にコンポーネント間での値のやり取りで使うことが多い印象です。

最初のうちは使わないかもしれませんが、覚えていて損はないと思います。

Vue, Nuxt 初心者オススメ参考書

基礎から学ぶ Vue.js

created by Rinker

• Kindle
• Amazon
• 楽天市場

Vue.jsのツボとコツがゼッタイにわかる本[第2版]

created by Rinker

• Kindle
• Amazon
• 楽天市場

CodeCamp（コードキャンプ）

プロダクトをプロのエンジニアと一緒に作ることが出来つつ、 時間や場所は自由に選べる為、費用を抑えながら、 意欲を保ちプログラミング習得が可能となっております。

学べる言語

• HTML/CSS
• JavaScript
• PHP
• MySQL
• Rudy
• JAVA
• Andoroid
• Swift

※プランによって学べる学習言語が異なります。

\詳しくは下記リンクをチェック/