Vue.js 组件错误地从其他组件输出内容

我第一次使用Gridsome。我只是试图设置我的网站布局-我没有任何API连接或任何东西，只是试图输出原始HTML。我有一个SkipToContent组件和一个Header组件。两者都在输出Header组件的内容，我很困惑。我已经尝试重新启动本地服务器，并进行常规调试，比如确保所有文件都已保存。以下是文件：

Header.vue

<template>
  <header class="header">
    <strong>
      <g-link to="/">{{ $static.metadata.siteName }}</g-link>
    </strong>
    <nav class="nav">
      <g-link class="nav__link" to="/">Home</g-link>
      <g-link class="nav__link" to="/about/">About</g-link>
      <g-link class="nav__link" to="/web/">Web Development</g-link>
      <g-link class="nav__link" to="/photography/">Photography</g-link>
    </nav>
  </header>
</template>

<script lang="ts">
import Vue from "vue";

export default class Header extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;
</style>

{{$static.metadata.siteName}

家
关于
网络开发
摄影
从“Vue”导入Vue；
导出默认类标头扩展Vue{}
质疑{
元数据{
站点名称
}
}
@使用“../styles/common”作为*；

SkipToContent.vue

<template>
  <a href="#main-content" class="skip-to-content__link">Skip to content</a>
</template>

<script lang="ts">
import Vue from 'vue';

export default class SkipToContent extends Vue {}
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

.skip-to-content {
  &__link {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -200%);
    transition: transform 0.15s ease;
    background: $primary;
    &:focus {
      transform: translate(-50%, 50%);
    }
  }
}
</style>

从“Vue”导入Vue；
导出默认类SkipToContent扩展Vue{}
质疑{
元数据{
站点名称
}
}
@使用“../styles/common”作为*；
.跳到内容{
&__链接{
位置：固定；
左：50%；
转换：翻译（-50%，-200%）；
转换：转换0.15秒轻松；
背景：小学；
&：焦点{
转换：翻译（-50%，50%）；
}
}
}

Default.vue

<template>
  <div class="layout">
    <SkipToContent />
    <Header />
    <main id="main-content">
      <slot />
    </main>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import SkipToContent from "~/components/SkipToContent.vue";
import Header from "~/components/Header.vue";
import { Component } from "vue-property-decorator";

@Component({
  components: {
    Header,
    SkipToContent,
  }
})
export default class App extends Vue {

};
</script>

<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

<style lang="scss">
@use '../styles/common' as *;

@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

</style>

从“Vue”导入Vue；
从“~/components/SkipToContent.vue”导入SkipToContent；
从“~/components/Header.vue”导入标题；
从“vue属性装饰器”导入{Component}；
@组成部分({
组成部分：{
标题，
SkipToContent，
}
})
导出默认类应用程序扩展Vue{
};
质疑{
元数据{
站点名称
}
}
@使用“../styles/common”作为*；
@导入url（“https://rsms.me/inter/inter.css");
html{
字体系列：“Inter”，无衬线；
}
@支持（字体变化设置：正常）{
html{
字体系列：“内部变量”，无衬线；
}
}

HTML输出：

我觉得我要么做了一些非常明显的错误的事情，要么这是在Gridsome中使用TypeScript的某种问题

---

谢谢您的建议：）

我想先尝试将

标题重命名为类似
SiteHeader
的名称，因为它可能会与常规的
标题
HTML元素混淆。@SteveEdson可能就是这样。。不幸的是，我已经切换到nuxt框架。谢谢你的帮助！事实上确实如此。您的组件被称为header，然后顶层元素是html header元素的一部分。它将递归地包含它自己。没问题。首先，我会尝试将
Header
重命名为类似
SiteHeader
的名称，因为它可能会与常规
Header
HTML元素混淆。@SteveEdson可能就是这样。。不幸的是，我已经切换到nuxt框架。谢谢你的帮助！事实上确实如此。您的组件被称为header，然后顶层元素是html header元素的一部分。它将递归地包含它自己。没问题。