【Nuxt.js】Nuxt文法編：component②動的コンポーネント

🎈 この記事はWP専用です
https://wp.me/pc9NHC-FE

前置き

今回はcomponent①で解説した
自作コンポーネントを動的に変えられる
componentタグについての解説です✨🙋‍♀️

⬇️公式ガイドはこちら
https://jp.vuejs.org/v2/guide/components.html#動的なコンポーネント
https://jp.vuejs.org/v2/guide/components-dynamic-async.html

ボタンで表示させる
コンポーネントを切り替えています🌟👀
条件つきのキャッシュ保存もやりますよ🙋‍♀️

非同期コンポーネントは
NuxtならasyncDataが使えるので
そちらをご覧ください👀

【Nuxt.js】Nuxt文法編：asyncData

ただasyncDataは
pageコンポーネントでしか使えないので
通常のコンポーネントで使うなら
こちらを参考にすると良いかと思います🍎🙋‍♀️
https://qiita.com/hiroyukiwk/items/b83f52e6d899b06506cb

簡単な使い方

component v-bind:is
動的に複数のコンポーネントを
切り替えることができます🌟

切り替える度に
新しいインスタンスが作成され
キャッシュはクリアされてしまいます🌪
クリアされないようにするには
componentタグを
keep-aliveタグで囲むのですが、
まずは簡単な使い方を理解しましょう💡

切り替えできることが分かれば良いので
コンポーネント名は安直に命名してます。

❓キャッシュ
保存する仕組みのことです💾
キャッシュのクリア
＝保存ができない状態です🌪
Input1に入力した文字が
別のコンポーネントを表示させると
なくなってしまっていますね🍃

コード

index.vue

<template>
 <div class="page">
   <button @click="changeComponent = 'Input1'">Input1</button>
   <button @click="changeComponent = 'Input2'">Input2</button>
   <button @click="changeComponent = 'Input3'">Input3</button>
   <component
     v-bind:is="changeComponent"
     class="box"
    >
     ここにコンポーネントが表示されます
    </component>
 </div>
</template>

<script>
import Input1 from '~/components/Input1.vue'
import Input2 from '~/components/Input2.vue'
import Input3 from '~/components/Input3.vue'

export default {
 data () {
   return {
     changeComponent: 'Input1',
   }
 },
 components: {
   Input1,
   Input2,
   Input3,
 },
}
</script>

<style lang="scss" scoped>
 .page {
   .box  {
     border: 1px solid orange;
   }
 }
</style>

【Input1.vue】
数字だけ変えたinputのコンポーネントを
3つ作成しています。

Input.vue

<template>
 <div class="input1">
   <p>Input1</p>
   <input type="text">
 </div>
</template>

値の受け渡し

propsなども使用できます⭕🙆‍♀️
inputでやるとややこしいので
ただのテキストをpropsで渡してみます。
画像Input1の
「親からテキストを渡す」の部分です。

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-FE