Vue.js(Nuxt)でcomponentを動的に追加する

今回はVue.jsで動的にコンポーネントを追加する方法を紹介します。
環境はNuxt.jsでTypeScriptを使用していますので、別環境の方は適宜読み換えてください。

まずはデモ画面です。
ComponentAとComponentBのヘッダーメニューがあり、クリックすると対応したコンポーネントが挿入されます。

続いて、ソースです。
componentタグではv-bind:isにコンポーネント名を渡すことで、指定したコンポーネントを挿入することができます。
今回は今後の拡張性を考えて、メニューがクリックされたらstoreにコンポーネント名が保存されるようにしています。
watchでstoreを監視していて、storeに登録されたらプロパティに渡されて、それが描画されるというような作りになっています。

index.vue

component-store.ts

ComponentA.vue

ComponentB.vue

今回は動的なコンポーネントの挿入方法の紹介でした。
これを利用すれば、わざわざv-showやv-ifでコンポーネントを切り替える必要がなくなるのでソースの簡略化ができたり、応用すればMDIタイプのサイトの構築が出来ると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です