Javascript 如何在布局中使用组件?

Javascript 如何在布局中使用组件?,javascript,vue.js,vuejs2,nuxt.js,Javascript,Vue.js,Vuejs2,Nuxt.js,所以我开始玩Nuxt.js。 我想修改默认布局文件,使其具有页眉和页脚。 为此,我想创建一个页眉和页脚组件,并在它们之间放置页面内容标签()。然而什么也没发生 以下是我的默认.vue布局文件: <template> <div> <header/> <nuxt/> <h1>Footer</h1> </div> </template> <script> imp

所以我开始玩Nuxt.js。 我想修改默认布局文件,使其具有页眉和页脚。 为此,我想创建一个页眉和页脚组件,并在它们之间放置页面内容标签(
)。然而什么也没发生

以下是我的默认.vue布局文件:

<template>
  <div>
    <header/>
    <nuxt/>
    <h1>Footer</h1>
  </div>
</template>

<script>
import Header from "~/components/Header.vue";

export default {
  components: {
    Header
  }
};
</script>

<style>
...
</style>

页脚
从“~/components/Header.vue”导入标题;
导出默认值{
组成部分:{
标题
}
};
...
以下是my 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>

标题
家
关于
.链接{
填充顶部:15px;
}
这有什么问题吗?我可以首先在布局文件中使用组件吗?我必须在其他地方单独注册新创建的组件吗

遗憾的是,关于这方面的具体信息并不多。我怎样才能做到呢


提前谢谢

不能对组件名称使用保留的HTML标记。它包括页脚、页眉等保留标记名的完整列表

因此,您需要将组件重命名为其他名称,例如“我的头”

尝试将
更改为
。(因为您为视图定义的组件是带有大写字母H的标题。)

大写很重要。在这种情况下,因为
标题是一个空标签,所以Vue只会呈现一个空标签而不会抱怨


什么是什么意思?没有呈现页眉和页脚?只是一张空白页?浏览器控制台中有错误吗?或者nodejs控制台?现在似乎不再是这样了。刚刚创建了一个“页脚”组件fine@brpaz页脚!=页脚。还是个案子