Nuxt独自

【Nuxt.js】Nuxt文法編:component④

前置き

文法編componentの続きです🌟
今回はcomponentの種類
2, 3の部分です!

  1. <好きに命名した名前 />
    =自作のコンポーネント
    importが必要!
  2. <nuxt />
    layouts内でのみ使用
  3. <nuxt-child />
    ネストされたルート内で使用

⬇️今までの記事はこちら
【Nuxt.js】Nuxt文法編:component①
【Nuxt.js】Nuxt文法編:component②動的コンポーネント
【Nuxt.js】Nuxt文法編:component③動的コンポーネント


nuxt

ページコンポーネント
(pages配下のコンポーネント)
の表示に使用するコンポーネント🌟
表示ページに応じて置き換えられます。

layout内でしか使いません。
layoutについてはこちらをご覧ください👀
【Nuxt.js】Nuxt文法編:layout


nuxt-child

公式: https://ja.nuxtjs.org/guides/features/nuxt-components/

Nuxtの自動ルーティングを
活かせるコンポーネントです🍒

親に<nuxt-child />
と書くことで、
どの子を開いても親が表示されます✨

親を開いた時に
子が表示される…
のではありません❌🙅‍♀️

他のコンポーネントとは違うので
ここが少しややこしいです😂笑

使い道

Headerをフォルダによって
分けたい時なんかに使えそうですね💡🤔

layoutに全種類のHeader入れて
ごちゃついてしまう💦
ということがなくなりそうです🍀

layoutとの併用は不可

<nuxt-child> 配下のページコンポーネントは
layoutプロパティを受け付けないので
layoutとの併用はできません❌


sample

directory

pages/
--| parent/
----| child.vue
----| _id.vue
--| parent.vue

urlはこれで表示していますが…

url

/parent/child

_id.vueも作って
このように表示してみてください🌟

url

/parent/好きな文字

CSSの影響

<nuxt-child />を含む
親ページコンポーネントで
CSSを指定すると
子で独自に指定している物以外は
子にも反映されます💡


まとめ

<nuxt />は基本的に
直接なにか書き加えることはなく、
<nuxt-child />
用途に応じて使います💡

ただ<nuxt-child />を使わずとも
大体が
layoutに入れてしまうか
v-ifで表示/非表示を切り替える
で事足りそうな気もします🤔

こんな時に使えそう!
実際に使って便利だった!
などがあれば教えていただけると嬉しいです💕


文法編componentを
4つの記事で解説してきましたが
これで終了です✨👏
お疲れ様でした🤗❤️

-Nuxt独自
-,

© 2020 aLiz Nuxt