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

前置き

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

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

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

nuxt

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

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

<template>
  <div class="layout">
    <Header />
    <nuxt />
    <Footer />
    </div>
  </div>
</template>

<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'

export default {
  components: {
    Header,
    Footer,
  }
}
</script>

</div>

</template>

import Header from '~/components/Header.vue'

import Footer from '~/components/Footer.vue'

export default {

components: {

Header,

Footer,

}

</script>

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/好きな文字

<template>
  <div class="page">
    <p>parent</p>
    <p>親</p>
    <nuxt-child />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    color: orange;
  }
</style>

<p>parent</p>

<nuxt-child />

</div>

</template>

export default {

}

</script>

.page {

color: orange;

}

</style>

<template>
  <div class="page">
    <p>child</p>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  .page {
    color: lightsalmon;
  }
</style>

<p>child</p>

</div>

</template>

export default {

}

</script>

.page {

color: lightsalmon;

}

</style>

CSSの影響

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

まとめ

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

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

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

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