🔖
<NuxtChild/>で子コンポーネントを読み込む
通常、Nuxtでコンポーネントを使うときはimportして使いますが、Nuxtにはimportを使わずにコンポーネントを読み込むNuxtChildコンポーネントという機能があります。
仕事で<NuxtChild/>を使ってコンポーネントを読み込んでいることに気づかず、このコンポーネントどうやって表示してるんだ？？となったので、ここでシェアしておきます。
NuxtChildコンポーネントを使って子コンポーネントを読み込む
Nuxtをやったことがある人であれば、<Nuxt />の記述は見たことがあるかと思います。
実はこの仲間に<NuxtChild />というのもあったりして以下のように使えたりします。
※ pages配下のディレクトリ構造
-| pages/
---| parent/
------| child.vue
---| parent.vue
<template>
<div>
<h1>I am the parent view</h1>
<!-- foobarはchild.vueに渡すprops -->
<NuxtChild :foobar="123" />
</div>
</template>
↑公式ドキュメントのサンプルより抜粋
parentフォルダ配下にchild.vueがある状態で、parent.vueで<NuxtChild />と記述すると、勝手にchild.vueを読み込んでくれる機能のようです。
たぶん、親コンポーネントのファイル名と読み込みたい子コンポーネントがあるディレクトリ名は一致させる必要があるかと思われます。
どういうメリットがある？
普通にimportするでいい気はするのですが、どんなメリットがあるのか考えてみました。
-
importやcomponentsに記述しなくてよいのでコード量が多少減る
んー、このくらい・・・？
こういうメリットもあるよーというのがあれば教えてもらえるとありがたいです！！
デメリットも考えてみる
個人的にはデメリットのほうが多いように感じました。
- NuxtChildコンポーネントの仕組みを知らないと気づけない
- 親コンポーネントを
index.vueにして子コンポーネントと同じディレクトリに配置したほうが分かりやすい - 普通に
importしたほうが他の人が読むときに分かりやすい
後で検証したい
- 子コンポーネントが複数ある場合はどうなるのか
Discussion