API <nuxt-child>组件介绍

发布时间：2023-04-14 14:17:30 所属栏目：教程来源：

导读：<nuxt-child> 组件用于显示嵌套路由场景下的页面内容。

例如：

-| pages/
---| parent/
------| child.vue
---| parent.vue
上面的目录树结构会生成下面这些路由配置：

[
{
path: '/parent

<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>我是父级页面 f2er.com 前端之家</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 prop 来呈现渲染命名视图：

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!