Vueと共通

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

前置き

liを使いまわして親のulによって
中のテキストを変えたりしたい!
というような場合に便利なkey属性をご紹介🌟
component②の続きです🙋‍♀️

<ul><ol><table><select>といった要素には
子要素にできるタグ<li><tr><option>
決まっていますね。
これらを分けてコンポーネント化したい場合に
活躍するのがkeyです。

公式: https://jp.vuejs.org/v2/guide/components.html#DOM-テンプレートパース時の警告

keyに使う値については
こちらをご覧ください👀

tableでいうならthは親、
trを子コンポーネントに分けると
管理がしやすいといったメリットもあります💡


コード①

liタグに使うコンポーネントは
is属性で指定してあげます🌟

) components

) pages


コード②

liのコンポーネントを作って
親でulタグの中にコンポーネントを入れる…
こうなりますね💡

) components

) pages

自動インポートにすると

pathや登録をせずに自動インポートすると
タグがliではなくそのコンポーネント名になりました。
そもそもliタグにisでバインドさせなければ
ならないのでこの書き方は絶対にしないのですが
参考程度に。



まとめ

自作コンポーネントについてはここまで。
お疲れ様でした🍀🤗

コンポーネントを作成しインポートすれば使用可能。
動的に使いたい場合は
key属性または
componentタグと一緒にis属性を使用…
おおまかにこんな感じです✨

次からは<nuxt /><nuxt-child />について
解説していきます❣🙋‍♀️

-Vueと共通

© 2020 aLiz Nuxt