・Vue.jsの動的コンポーネントってどう使うの？
こんな疑問にお答えします。
Vue.jsではコンポーネントを動的に切り替える方法があります。
それは「component」というタグを使用すること。
今回は自分用のメモとしてこの動的コンポーネントについてまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsの動的コンポーネントの使い方」について解説していきます！
Vue.jsの動的コンポーネントの使い方
【最新】Vue.jsの入門にオススメの本【３選】 
【最新】Vue.jsの入門にオススメのUdemy教材【３選】 目次
【解説】Vue.jsの動的コンポーネントの使い方【component／:is】
そんな動的コンポーネントを使ったサンプルがこちら↓
<script setup lang="ts">
import TestVue01 from './components/TestVue01.vue';
import TestVue02 from './components/TestVue02.vue';
import TestVue03 from './components/TestVue03.vue';
import { ref } from 'vue';
const TestComponent = ref(TestVue01)
</script>
<template>
<button @click="TestComponent = TestVue01">01</button>
<button @click="TestComponent = TestVue02">02</button>
<button @click="TestComponent = TestVue03">03</button>
<component :is="TestComponent"/>
</template><template>
<p>コンポーネント１</p>
</template><template>
<p>コンポーネント２</p>
</template><template>
<p>コンポーネント３</p>
</template>ボタンをクリックしたら、文章部分が変わります。
コンポーネントが動的に切り替わるのが特徴です。
コードの中で重要な点がこちら↓
①：コンポーネントをimportする
②：componentタグを記述
③：is属性を使う
④：変数を用いて動的に切り替え
豆知識：shallowRefを使う
順に解説してきます。
まず動的に切り替える用のコンポーネントをimportします。
<script setup lang="ts">
import TestVue01 from './components/TestVue01.vue';
import TestVue02 from './components/TestVue02.vue';
import TestVue03 from './components/TestVue02.vue';
import { ref } from 'vue';
</script>今回は例として「TestVue01」「TestVue02」「TestVue03」という３つのコンポーネントを用意しました。
<template>
<p>コンポーネント１</p>
</template><template>
<p>コンポーネント２</p>
</template><template>
<p>コンポーネント３</p>
</template>続いて動的コンポーネントを使うための「component」というタグを使用します。
<template>
<component/>
</template>このタグを使うことで、動的なコンポーネントを実装できます。
そしたら「component」タグの中に「:is」属性を記述します。
「:is属性」を用いて、その値にインポートしたコンポーネント名を入れましょう。
するとそのコンポーネントが反映されます。
<template>
<component :is="コンポーネント名やリアクティブ変数"/>
</template>例として下記のように記述すれば、「TestVue01」コンポーネントが反映されるということです。
<template>
<component :is="TestVue01"/>
</template>ただ今回はこの値にリアクティブ変数を使います。
「:is属性」の値にリアクティブ変数を使い、ボタンクリックすることで変数の値が切り替わるよう実装しました。
<script setup lang="ts">
~~~
~~~
const TestComponent = ref(TestVue01)
</script>
<template>
<button @click="TestComponent = TestVue01">01</button>
<button @click="TestComponent = TestVue02">02</button>
<button @click="TestComponent = TestVue03">03</button>
<component :is="TestComponent"/>
</template>こうすることで「:is属性」の値がクリックの都度かわり、表示されるコンポーネントが動的に切り替わるという仕組みになります。
ちなみにコンポーネントが切り替わるとき、ライフサイクルフックのmount,unmountがされています。
【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】 つまり内容が保持されません。
実は下記記事の方法を使えば保持が可能です↓
【解説】Vue.jsのKeepAliveの使い方【Inclue／Exclude／max】 先述したやり方でも実装は可能なのですが、コンソールログを見るとエラーがでています。
それを解消するには「ref」ではなく「shallowRef」を使いましょう。
<script setup lang="ts">
~~~
~~~
import { shallowRef } from 'vue';
const TestComponent = shallowRef(TestVue01)
</script>
<template>
<button @click="TestComponent = TestVue01">01</button>
<button @click="TestComponent = TestVue02">02</button>
<button @click="TestComponent = TestVue03">03</button>
<component :is="TestComponent"/>
</template>上記4,5行目ですね。
これを使うことでオブジェクトだけをリアクティブにしてくれます。
ただその中のプロパティはリアクティブにならないのだそう。
つまり名前どおり浅くリアクティブにしてくれるという感じです。
あまり使わないそうですが、今回のようなコンポーネントをリアクティブにしたい場合に利用するとパフォーマンス的に良いとのこと。
refでコンポーネントをリアクティブにすると、必要以上にコストがかかるってことだね。
ちなみにrefに関しては下記記事を参考にどうぞ↓
【解説】Vue.jsの「ref」と「reactive」の使い方【リアクティブ】 【最新】Vue.jsの入門にオススメの本【３選】 【最新】Vue.jsの入門にオススメのUdemy教材【３選】 【解説】Vue.jsの動的コンポーネントの使い方【component／:is】：まとめ
- 「component」タグにて動的コンポーネントが使える
- 「:is」属性の値にコンポーネント名を入れれば反映可能
- 「:is」属性の値をリアクティブ変数にて変えれば動的に切り替え可能
Vue.jsで動的コンポーネントを使う時はためしてみてね！
