Vueと共通

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

前置き

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

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

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

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

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


簡単な使い方

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

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

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

キャッシュ

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

コード

) pages

) components

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


値の受け渡し

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

コード

) pages

) components


keep-aliveでキャッシュを保存

componentタグを
keep-aliveタグで囲むだけで
あら不思議❗️🤭
キャッシュが保存されます💾

Input1に入力したテキストが
他のコンポーネントに切り替えた後でも
保存されていることが分かりますね♪

コード

) pages


keep-aliveにつけられる条件

Input3だけキャッシュされています💾
keep-aliveに使える属性で
条件を絞ることができます🍊

公式:
https://vuejs.org/v2/api/#keep-alive

  • include
    文字列, 配列, 正規表現(RegExp)の
    指定が可能。
    一致するコンポーネントのみが
    キャッシュされます。
  • exclude
    文字列, 配列, 正規表現(RegExp)の
    指定が可能。
    一致するコンポーネントのみが
    キャッシュされません。
  • max
    キャッシュする
    コンポーネントインスタンスの最大数を指定します。
    最大値に達した場合は
    アクセスの古い順番に消えます。

コード

) pages

keep-alive-props

<nuxt /><nuxt-child />
キャッシュさせたい場合は
こんな感じでkeep-alive-props属性を
バインドさせて使います。

<nuxt-child keep-alive :keep-alive-props="{ include: ['Select'] }" />

ただ使っているのを
見かけたことがない
=使うシーンがあまりないので
そういうのもあるらしいくらいの認識で良いかもしれません⭕️


まとめ

  • 動的にコンポーネントを切り替えるにはcomponentタグにis属性を使用する
  • componentタグでもpropsを使った値の受け渡しなどが可能
  • キャッシュを保存させるにはcomponentタグをkeep-aliveタグで囲む

-Vueと共通

© 2020 aLiz Nuxt