<nuxt-child> コンポーネント

このコンポーネントは ネストされたルート 内で子コンポーネントを表示するために使われます。

例:

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

このファイルの木構造から次のルーティングが生成されます:

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

child.vue コンポーネントを表示するには pages/parent.vue 内に <nuxt-child/> を挿入する必要があります:

<template>
  <div>
    <h1>I am the parent view</h1>
    <nuxt-child :foobar="123" />
  </div>
</template>

<nuxt-child/> は keep-alive と keep-alive-props を受け入れます:

<template>
  <div>
    <nuxt-child keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- このように変換されます -->
<div>
  <keep-alive :exclude="['modal']">
    <router-view />
  </keep-alive>
</div>

子コンポーネントは、通常の Vue コンポーネントのようなプロパティも受け取ることができます。

実際の例を見たいときは ネストされたルートの例 を参照してください。

名前付きビュー

Nuxt v2.4.0 で導入されました

<nuxt-child/> は名前付きビューを描画するために name プロパティを受け入れます:

<template>
  <div>
    <nuxt-child name="top" />
    <nuxt-child />
  </div>
</template>

実際の例を見たいときは 名前付きビューの例 を参照してください。