[英]Nuxt.js - How to use component inside layout?
所以我开始玩Nuxt.js. 我想修改默认布局文件以具有页眉和页脚。 为此,我想创建一个页眉和页脚组件,并在它们之间放置页面内容标记( <nuxt/>
)。 但没有任何反应。
这是我的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>
这是我的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>
这有什么问题吗? 我可以首先在布局文件中使用组件吗? 我是否必须在其他地方单独注册新创建的组件?
可悲的是,没有太多关于此的信息。 我怎样才能实现它?
提前致谢!
尝试将<header />
更改为<Header />
。 (因为您为视图定义的组件是具有大写H的标题。)
资本化很重要。 在这种情况下,因为
header
是现有的元素标记 ,所以Vue只会呈现一个空标记而不会抱怨。
您不能将保留的HTML标记用于组件名称。 它包括页脚,标题等。 这里是保留标签名称的完整列表。
因此,您需要将组件重命名为不同的组件,例如my-header
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.