正文 

当前位置： 首页 > 问答 >

Nuxt.js：理解 <nuxt-child> 组件

     2023-02-22     242

关键词：

【中文标题】Nuxt.js：理解 <nuxt-child> 组件【英文标题】：Nuxt.js: understanding <nuxt-child> component 【发布时间】：2019-03-09 23:53:44 【问题描述】：

在 Nuxt.js 中，我做了这个文件夹结构：

├── parent
│   ├── child1.vue
│   └── child2.vue
├── parent.vue

在 parent.vue 中，我有这个：

<template>
    <div>
        <h3>Parent element</h3>
        <ul>
            <li><nuxt-child/></li>
            <li><nuxt-child/></li>
        </ul>
    </div>
</template>

在child1.vue中：

<template>
    <div>
        <h3>Child 1</h3>
    </div>
</template>

在 child2.vue 中：

<template>
    <div>
        <h3>Child 2</h3>
    </div>
</template>

我启动服务器（yarn run dev）并转到这个 URI：http://localohost:3000/parent 我看到这个：

Parent element    
     - 
     -

如果我去http://localohost:3000/parent/child1，我会看到：

Parent element    
     - Child 1
     - Child 1

如果我去http://localohost:3000/parent/child2，我会看到：

Parent element    
     - Child 2
     - Child 2

问题：

从documentation，我了解到 child1.vue 和 child2.vue 是 parent.vue 的子级，所以我希望在访问时看到它们的列表http://localhost:3000/parent，但未显示。只有当我指向它的 URI 时，才会显示每个孩子。有人向我解释这种行为吗？

【问题讨论】：

【参考方案1】：

&lt;nuxt-child/&gt; 是子组件的替代品，基于路由。

只需使用一个即可：

<template>
    <div>
        <h3>Parent element</h3>
        <nuxt-child/>
    </div>
</template>

然后把你需要的东西放在孩子身上。

编辑：子页面是根据路由引入的。这是手动操作nested routes。

例如，假设我有一些事件。父页面是event，然后每个事件都是一个子页面。

- events
    - christmas
    - easter

当我转到 events/christmas 或 events/easter 时，我会看到“活动”页面，但会显示我想要的活动内容。父页面events/ 可能只包含我要访问的所有事件的列表。

【讨论】：

你所说的我都知道，希望你能根据路线详细说明，因为我觉得真正的解释就在附近。谢谢 当我导航到子页面时，如何在不渲染父页面内容的情况下维护“父/子”的嵌套 uri？ @JacobKochocki 我认为这更像是一个 Vue 路由器问题，我认为没有办法做到这一点

nuxt.js -> v-bind 到 <nuxt> 的 props

】nuxt.js->v-bind到<nuxt>的props【英文标题】：nuxt.js->v-bindtopropsof<nuxt>【发布时间】：2017-08-2309:29:24【问题描述】：我做了一个nuxt.js项目。我正在尝试将数据传递给组件（nuxt）。在我的第一个vue文件中，我有这段代码&l... 查看详情

Nuxt 路由器，比 nuxt-child 更深入

】Nuxt路由器，比nuxt-child更深入【英文标题】：Nuxtrouter,goingdeeperthannuxt-child【发布时间】：2019-09-1821:12:03【问题描述】：我正在使用Nuxt子组件，但也想更深地链接到子组件。我认为这最能说明问题。example.com/cars<--cars.vue(hasnuxt-... 查看详情

如何清理 Nuxt js 额外的 div 容器？

】如何清理Nuxtjs额外的div容器？【英文标题】：HowtocleanupNuxtjsextradivcontainers?【发布时间】：2021-04-0913:37:47【问题描述】：这是我的示例页面：这是Nuxt布局：<template><div><Nuxt/></div></template>这就是Nuxt编译器生... 查看详情

Tabulator + Nuxt.js：如何在回调中使用 axios？

】Tabulator+Nuxt.js：如何在回调中使用axios？【英文标题】：Tabulator+Nuxt.js:Howtouseaxiosincallbacks?【发布时间】：2020-01-1608:48:53【问题描述】：我尝试在我的Nuxt.js项目中添加Tabulator。我已经完成了下一个组件：<template><divref="table... 查看详情

Nuxt.js 本地站点页面仅在登陆时从 Strapi 加载数据，而不是通过 <nuxt-link> 导航

】Nuxt.js本地站点页面仅在登陆时从Strapi加载数据，而不是通过<nuxt-link>导航【英文标题】：Nuxt.jslocalsitepagesloaddatafromStrapionlyonlanding,notnavigatingvia<nuxt-link>【发布时间】：2020-05-0812:13:09【问题描述】：我正在使用来自Strapi... 查看详情

使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本

】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】：Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】：2018-05-0717:29:21【问题描述】：我正在使用nuxt.js（基于vue.js）构建自定义网站，我需要使用合作伙伴提... 查看详情

Nuxt.js vuex 存储未持久化

】Nuxt.jsvuex存储未持久化【英文标题】：Nuxt.jsvuexstorenotpersisted【发布时间】：2021-06-2607:36:23【问题描述】：我的Nuxt.js设置出现了一些奇怪的问题。Store中的某些状态不是持久的，每次我加载另一个视图时，它们都会返回默认值。... 查看详情

如何更新 vuetify mdi 图标？ (Nuxt.js)

】如何更新vuetifymdi图标？(Nuxt.js)【英文标题】：Howtoupdatevuetifymdiicons?(Nuxt.js)【发布时间】：2020-06-0618:07:45【问题描述】：我在Nuxt.js上使用Vuetify。但我不能使用一些材料设计图标。例如&lt;v-icon&gt;mdi-cog&lt;/v-icon&gt;显... 查看详情

部署到 Heroku 的 Nuxt.js 应用程序只有 TailwindCSS 的 < SM 断点样式

】部署到Heroku的Nuxt.js应用程序只有TailwindCSS的<SM断点样式【英文标题】：Nuxt.jsappdeployedtoHerokuonlyhasTailwindCSS\'sstylesfor<SMbreakpoint【发布时间】：2020-04-2401:52:21【问题描述】：我将我的第一个Nuxt.js应用程序部署到Heroku...一切都... 查看详情

Vue.js (Nuxt) 返回 JSON 数据

】Vue.js(Nuxt)返回JSON数据【英文标题】：Vue.js(Nuxt)ReturnJSONData【发布时间】：2021-10-1709:40:34【问题描述】：我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码（网站的源代码。如：view-source:https://website.com）。我... 查看详情

Vue/Nuxt.js 的 TS 错误：类型 '(() => any) 上不存在属性'纬度' | ComputedOptions<任何>'

】Vue/Nuxt.js的TS错误：类型\\\'(()=>any)上不存在属性\\\'纬度\\\'|ComputedOptions<任何>\\\'【英文标题】：TSerrorwithVue/Nuxt.js:Property\'latitude\'doesnotexistontype\'(()=>any)|ComputedOptions<any>\'Vue/Nuxt.js的TS错误：类型\'(()=&g 查看详情

Nuxt.js 常用 SCSS 模块？

】Nuxt.js常用SCSS模块？【英文标题】：Nuxt.jscommonSCSSmodules?【发布时间】：2021-05-0506:00:51【问题描述】：我有一个util.scss文件，我想将它包含在几个组件中：.griddisplay:grid;grid-template-columns:1fr1fr;...我在我的组件中导入并使用这个文... 查看详情

将资产图像路径作为动态内联样式背景图像 url (Nuxt.js)

】将资产图像路径作为动态内联样式背景图像url(Nuxt.js)【英文标题】：Passassetsimagepathasdynamicinlinestylebackground-imageurl(Nuxt.js)【发布时间】：2020-01-0120:42:05【问题描述】：我正在开发Nuxt.js应用程序，我想使用资产文件夹中的图像动... 查看详情

nuxt.js服务端渲染中如何实现路由的跳转

一、nuxt.js路由跳转1、nuxt-link标签跳转在html标签内使用nuxt-link跳转，相应于超链接a标签，使用方式如下：<nuxt-linkto="/">首页</nuxt-link>2、编程式导航-JS代码内部跳转实际项目中，很多时候都是通过在JS代码内部进行导航的... 查看详情

如何使用 jest 在 nuxt.js 中测试 head()

】如何使用jest在nuxt.js中测试head()【英文标题】：Howtotesthead()innuxt.jsusingjest【发布时间】：2020-05-1418:26:53【问题描述】：我正在使用带有Jest的Nuxt.js进行单元测试。我在布局中添加了一个head函数来更改标题，我想对其进行单元测... 查看详情

Nuxt.js - 如何将图像上传到 cloudinary？

】Nuxt.js-如何将图像上传到cloudinary？【英文标题】：Nuxt.js-Howtouploadimagetocloudinary?【发布时间】：2021-03-0803:15:23【问题描述】：我正在尝试从客户端将图像上传到cloudinary。我创建了一个表单数据，我正在尝试传递它，但它返回为... 查看详情

在 nuxt.js 页面中包含外部 javascript 文件

】在nuxt.js页面中包含外部javascript文件【英文标题】：Includeexternaljavascriptfileinanuxt.jspage【发布时间】：2020-03-1918:23:49【问题描述】：我有一个比较简单的问题。我正在尝试在Nuxt.js中实现thewidgetfromthiscodepen。这是我的代码，如果... 查看详情

如何从 nuxt.js 的 assets 文件夹中导入 css 文件

】如何从nuxt.js的assets文件夹中导入css文件【英文标题】：Howtoimportcssfilefromassetsfolderinnuxt.js【发布时间】：2020-06-0208:00:34【问题描述】：<template><divclass="container"><head><linkrel="stylesheet"href="~assets/css/style-light 查看详情