Want to take a look at our new docs? Our new docs are now in beta. Have fun!

API: <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-alivekeep-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>

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

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us