[英]Nuxt.js - How to use component inside layout?
So I started playing around with Nuxt.js. 所以我开始玩Nuxt.js. I want to modify the default layout file to have a header and a footer. 我想修改默认布局文件以具有页眉和页脚。 For that I want to create a Header and a Footer component and place the page content tag ( <nuxt/>
) between them. 为此,我想创建一个页眉和页脚组件,并在它们之间放置页面内容标记( <nuxt/>
)。 However nothing happens. 但没有任何反应。
Here is my default.vue layout file: 这是我的default.vue布局文件:
<template>
<div>
<header/>
<nuxt/>
<h1>Footer</h1>
</div>
</template>
<script>
import Header from "~/components/Header.vue";
export default {
components: {
Header
}
};
</script>
<style>
...
</style>
Here is my Header.vue component file: 这是我的Header.vue组件文件:
<template>
<div>
<h1>Header</h1>
<div class="links">
<nuxt-link to="/" class="button--grey">Home</nuxt-link>
<nuxt-link to="/about" class="button--grey">About</nuxt-link>
</div>
</div>
</template>
<style>
.links {
padding-top: 15px;
}
</style>
Is there something wrong with this? 这有什么问题吗? Can I use components inside layouts files in the first place? 我可以首先在布局文件中使用组件吗? Do I have to register newly created components separately somewhere else? 我是否必须在其他地方单独注册新创建的组件?
Sadly, there isn't much information specifically about this. 可悲的是,没有太多关于此的信息。 How can I achieve it? 我怎样才能实现它?
Thanks in advance! 提前致谢!
Try changing <header />
to <Header />
. 尝试将<header />
更改为<Header />
。 (as the component you have defined for the view is Header with a capital H.) (因为您为视图定义的组件是具有大写H的标题。)
Capitalization is important. 资本化很重要。 In this case, because
header
is an existing element tag , Vue will just render an empty tag without complaining. 在这种情况下,因为header
是现有的元素标记 ,所以Vue只会呈现一个空标记而不会抱怨。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.