【typescript】vue-property-decorator(vue-class-component)で$refsを扱う

こんにちは！

今回はvue.js（Nuxt.js）でtypescriptを利用している際の$refsの扱い方です。

記載するコードはbootstrap-vueのカルーセルを制御する際に必要だった$refsの扱い方サンプルです。
カルーセルのスライドを前後させるUIを、デフォルトのUIではなく独自で作ったので$refsを利用してイベント発火させています。

お役に立てると嬉しいです！

目次

1. サンプルコード
2. 説明
3. まとめ

サンプルコード

<template>
  <b-carousel ref="targetCarousel" :interval="4000">
    <b-carousel-slide>
      // ...略
    </b-carousel-slide>
  </b-carousel>
</template>
import { BCarousel } from 'bootstrap-vue'
import { Vue, Component } from 'vue-property-decorator'

<script lang="ts">
@Component
export default class CarouselSample extends Vue {
  $refs!: {
    targetCarousel: BCarousel
  }

  prev(): void {
    this.$refs.targetCarousel.prev()
  }

  next(): void {
    this.$refs.targetCarousel.next()
  }
}
</script>

説明

特に説明するまでもなさそうです。
以下でthis.$refsを扱えるようにしているイメージです。

  $refs!: {
    targetCarousel: BCarousel
  }

また、template側にもrefを設定しておきます。

  <b-carousel ref="targetCarousel" :interval="4000">

カルーセルのスライドを前後させたい時の処理が以下です。
this.$refs.${target ref name}でtemplateに登録したrefが取得できます。

  prev(): void {
    this.$refs.targetCarousel.prev()
  }

  next(): void {
    this.$refs.targetCarousel.next()
  }

まとめ

未だにtypescriptだと、どのように書けばいいかわからなくなってしまう時が多いです。
この記事が誰かのお役に立てると嬉しいです。