[英]Nuxt.js: understanding <nuxt-child> component
In Nuxt.js, I did this folder structure: 在Nuxt.js中,我做了这个文件夹结构:
├── parent
│ ├── child1.vue
│ └── child2.vue
├── parent.vue
In parent.vue , I have this: 在parent.vue中 ,我有这个:
<template>
<div>
<h3>Parent element</h3>
<ul>
<li><nuxt-child/></li>
<li><nuxt-child/></li>
</ul>
</div>
</template>
In child1.vue : 在child1.vue中 :
<template>
<div>
<h3>Child 1</h3>
</div>
</template>
In child2.vue : 在child2.vue中 :
<template>
<div>
<h3>Child 2</h3>
</div>
</template>
I launch the server (yarn run dev) and go this URI: http://localohost:3000/parent
where I see this: 我启动服务器(纱线运行开发)并转到这个URI:
http://localohost:3000/parent
我在哪里看到:
Parent element
-
-
If I go to http://localohost:3000/parent/child1
, I see this: 如果我去
http://localohost:3000/parent/child1
,我看到这个:
Parent element
- Child 1
- Child 1
If I go to http://localohost:3000/parent/child2
, I see this: 如果我去
http://localohost:3000/parent/child2
,我看到这个:
Parent element
- Child 2
- Child 2
Question: 题:
From the documentation , I understand that child1.vue and child2.vue are children of parent.vue, so I expect to see them list when I visit http://localhost:3000/parent
, but they were not displayed. 从文档中 ,我了解child1.vue和child2.vue是parent.vue的子代,所以我希望在访问
http://localhost:3000/parent
时看到它们列出,但是它们没有显示。 Each child is displayed only when I point to its URI. 只有当我指向其URI时,才会显示每个子项。 Anyone to explain me this behavior?
有人向我解释这种行为吗?
The <nuxt-child/>
is a replacement for the child component, based on the route . <nuxt-child/>
是子组件的替代品, 基于路线 。
Using one is all that you need: 使用一个就是你需要的一切:
<template>
<div>
<h3>Parent element</h3>
<nuxt-child/>
</div>
</template>
Then put what you need that differs in the child. 然后把你需要的东西放在孩子身上。
Edit: the child page is brought in based on the route. 编辑:子页面根据路径引入。 This is a manual way of doing nested routes .
这是一种执行嵌套路由的手动方式。
For example, say I had some events. 例如,说我有一些事件。 The parent page is
event
, and then each event is a child. 父页面是
event
,然后每个事件都是一个子事件。
- events
- christmas
- easter
When I go to events/christmas
or events/easter
, I'll see the 'event' page but with the contents of the event I wanted. 当我去参加
events/christmas
或events/easter
,我会看到“活动”页面,但会看到我想要的活动内容。 The parent page events/
could possibly just contain a list of all the events for me to visit. 父页面
events/
可能只包含我要访问的所有事件的列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.