Vueで再帰的コンポーネントを作成する方法【Vue3】

はじめに

この記事ではVue.jsで再帰的コンポーネントの作成方法を解説します。

再帰的コンポーネントとは、あるコンポーネントが自身を呼び出しているようなコンポーネントを指します。
例えば、ディレクトリ構造やスレッド形式のコメント欄等をコンポーネント化する際に使うことが考えられます。

今回は、ディレクトリ構造を表現するコンポーネントを作成してみます。

再帰的コンポーネントの基本

Vue.jsで再帰的コンポーネントを作成するのは簡単です。

コンポーネントはデフォルトで自身を呼び出すことができます。
例えば、FooBar.vue というファイル名のコンポーネントは、そのテンプレート内で <FooBar/> として呼び出せます。

自身を呼び出すだけではコンポーネントが無限に描画されていくので、あとは描画の条件をv-ifなどを利用して制御します。

ディレクトリ構造を再帰的コンポーネントで再現する

再帰的コンポーネントの例として、ディレクトリ構造を表現するコンポーネントを作成します。
コンポーネントの見た目は以下のようになります。

今回作成するコンポーネント

ディレクトリ構造を再現する再帰的コンポーネントDirectoryTree.vueは、以下のように作成しました。
（CSSは一部省略）

propsのtypeがdirectoryのときはディレクトリのため再度、自身のコンポーネント名であるを呼び出します。
propsのtypeがdirectoryのときはファイルのため、ファイル名のみを描画しています。

このコンポーネントを呼び出す親コンポーネントApp.vueは、以下のように作成しました。

ディレクトリ構造を持つリアクティブな変数をtreeとして定義します。

DirectoryTreeにtreeを受け渡すことで、ディレクトリ構造を描画することができます。

上記のコードは以下のプレイグラウンドで確認することができます。

まとめ

今回は再帰的コンポーネントの作成方法を解説しました。
Vue.jsではあるコンポーネント内で自身を呼び出すことができるため、簡単に再帰的コンポーネントを作成することができます。

既に誰かがまとめていると思ったのですが、Vue3かつ<script setup>構文で書かれた例がまだなかったためまとめてみました。
参考になれば幸いです。

参考

• Vue.js公式 再帰的コンポーネント