codecamp

Nuxt.js <nuxt-child> 组件

<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>我是父级页面</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>



Nuxt.js <nuxt> 组件
Nuxt.js <nuxt-link> 组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }