javascript Nuxt.js - 如何在布局内使用组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51747207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nuxt.js - How to use component inside layout?
提问by Codearts
So I started playing around with 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. However nothing happens.
所以我开始玩弄 Nuxt.js。我想修改默认布局文件以具有页眉和页脚。为此，我想创建一个 Header 和一个 Footer 组件，并<nuxt/>在它们之间放置页面内容标签 ( )。然而什么也没有发生。
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!
提前致谢！
回答by JAM
Try changing <header />to <Header />. (as the component you have defined for the view is Header with a capital H.)
尝试更改<header />为 <Header />. （因为您为视图定义的组件是带有大写 H 的 Header。）
Capitalization is important.In this case, because
headeris an existing element tag, Vue will just render an empty tag without complaining.
大写很重要。在这种情况下，因为
header是一个现有的元素标签，Vue 只会渲染一个空标签而不会抱怨。
