🔖

<NuxtChild/>で子コンポーネントを読み込む

2021/03/18に公開

通常、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するでいい気はするのですが、どんなメリットがあるのか考えてみました。

  • importcomponentsに記述しなくてよいのでコード量が多少減る

んー、このくらい・・・?
こういうメリットもあるよーというのがあれば教えてもらえるとありがたいです!!

デメリットも考えてみる

個人的にはデメリットのほうが多いように感じました。

  1. NuxtChildコンポーネントの仕組みを知らないと気づけない
  2. 親コンポーネントをindex.vueにして子コンポーネントと同じディレクトリに配置したほうが分かりやすい
  3. 普通にimportしたほうが他の人が読むときに分かりやすい

後で検証したい

  • 子コンポーネントが複数ある場合はどうなるのか

参考

Discussion