Nuxt.js+Typescriptで子要素の関数を実行する方法

概要

親コンポーネントから$refsを利用して子コンポーネントの関数を実行する方法です。

背景

最近、Nuxt+Typescriptを触り始めています。
その中で、$refsを利用しようとしたところ、型定義のエラーが発生し、調べた上で実装いたしましたが、コードレビューでボツになってしまいました。コンポーネント間の依存関係を強めるので極力refは利用しない方向で実装してほしいとのことです。

$refsなんてめったに使わないので、コードの削除とともに記憶からも削除されそうなんで記事を残すことにしました。

「nuxt typescript refs」だけで上記のエラーの記事がバンバン引っかかるほど他の方が記事を書かれているので詳細はそちらをご参照ください。
この記事はあくまで、私のメモになります。過度な省略等、ご容赦ください。

実装

Buttonコンポーネントをクリックしたら、Childコンポーネントの中で定義されているchildFunctionを実行したいという設定の実装。

<template>
...
  <Button @click="handleClick" />
  <Child ref="child" />
...
</template>

<script lang="ts">
...
  methods: {
    handleClick() {
      const child = this.$refs.child as InstanceType<typeof Child>
      child.childFunction()
    },
  },
...
</script>