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 SFC Playground
https://play.vuejs.org/#eNqtVE1y0zAUvsobbZrONAm0ZWOcMIWWGVhAB7qruzC2nKooskeS02QyWTDDDTgAV+QIPMmWLTtuyoIsMtb7/d7P97bkoigmq5KSgIQqkazQoKguC+CxWMwiolVE5pFgyyKXGrYgaQY7yGS+hCN0O3rd6C6ZpInO5eZGUlpbTKYdqUlkPCKR5EJp0MZyZmKObiMBsDV/AHpT0AAikjrfiJxUGhEvrQajvmyEyT3jqaQiABvE/OpAfrCMcdq4+LHeo6INBrBrvgai7EPqwTrtKAag9QIfhNiH2Q3uQz0QdRhyD/bZnvIJ6AOJni2hX8Z+sn4p/yPL+T9kuXuyna3GSStJ9bLYBtD4+V/VMuNxd4xbH04rgiGd8KHpsuCxpvgy0cMOUVzuwORAFh41QzyKSKM02Yxy6gvd3Ax3TaRaMw+7VMS04dTDQE6Q6sjKjC0mDyoXeA9skRFJ8mWB5cjPhWbI2ogEbjQRiTnPHz9amZYlrTuFPvc0+T4gf1BrI4vItaSKylU7RUQbywXVlfrq6ye6xu9GuczT0nT5gPILVTkvDcbK7G0pUoTt2Vm0H+y1YmJxo67WmgrlijJA2wlHBG/VuwOlt3DPJmfWLxI77OLewXvusgpNZRYnFK5lXih/tZSWiBM3xy2WJ3BjfhPAhZTxJozFZo4aROGua2HjzeCR6ftLmsUl12qU0owJalOF9n8+Oj7p7nNvl+tnew9GxzCbw63hw+6ZvW5esBqzDIu2mCYmE8xmM+jstWMCZ/WXfakiFpDwWCl0927ZfLutKpwYoLDbIQw09V1L7r3wnbIV4shyiZFsOcBEHcNV16BonAZ56X6On9bdltUysbGpaVrZmMeAjcfayq4F1LUd4LEHdool+h2YNi0Ip3VbO6zvz4hy1RwkbwzdIVT3zkvTn0Tj5k9kGEAPTaj0hlPAQ1TQ1FqX3FFuiYRjuH4v7P4DFHGaIhvGTHDc6LFCQuoATs+LtTWwRADgzPlzpjRaYfxxtekiF9Q3NWAnzYYFwTeKq0KdO3IKrwVmiMif379+RGTP1fTlsNfP1gt7Y6DMye4vz7jXHg==
まとめ
今回は再帰的コンポーネントの作成方法を解説しました。 Vue.jsではあるコンポーネント内で自身を呼び出すことができるため、簡単に再帰的コンポーネントを作成することができます。
既に誰かがまとめていると思ったのですが、Vue3かつ<script setup>
構文で書かれた例がまだなかったためまとめてみました。
参考になれば幸いです。
参考
- Vue.js公式 再帰的コンポーネント
Vue.js
Vue.js - The Progressive JavaScript Framework
https://vuejs.org/

関連記事

AWS IAMでPasskeyが利用可能に Windows PCで指紋認証を設定してみました

React公式チュートリアルをVueでも書いて比較してみた

Vueのスコープ付きCSSで子コンポーネントにCSSを適用する【Vue3】

Vercel(Hobby)→AWS Amplify 移行して分かった両者の違い

手軽に使えるVueプレイグラウンド環境。Vue SFC Playground解説

Vite、TailwindCSS v4環境を構築【Tailwind CSS v4-alpha】
オススメ記事

React公式チュートリアルをVueでも書いて比較してみた

フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】

VueのdefineModelを活用した入力コンポーネントの作成方法【Vue3.4】

Nuxt3にStorybookを導入する方法

NuxtJSを使ってブログを作ってみた【Nuxt Content/TailwindCSS/daisyUI】
