VueJS嵌套组件渲染问题：Header组件无法正常显示子组件

核心问题：原生HTML标签与自定义组件名冲突 #

你在index.vue中注册了自定义的Header组件，但模板里使用的<header />是HTML原生标签，并非你编写的自定义组件，因此自定义Header组件完全没被渲染。

修复步骤 #

1. 修改模板中的组件调用标签 #

将index.vue里的<header />改为自定义组件的正确调用方式：

<template>
  <main>
    <!-- 方式1：使用驼峰式标签（单文件组件模板直接支持） -->
    <Header />
    <!-- 方式2：用短横线分隔式，更符合HTML标签命名规范 -->
    <!-- <app-header /> -->
    <div id="page-content">
      <h1>Home</h1>
    </div>
  </main>
</template>

如果选择短横线分隔式，需要同步修改组件注册名：

export default Vue.extend({
  name: 'Home',
  components: {
    'app-header': Header
  },
})

2. 验证组件导入路径 #

确认index.vue中Header组件的导入路径../components/header/header.vue与实际项目文件目录结构完全匹配，路径错误也会导致组件无法加载。

3. 修复fixed定位的内容遮挡问题 #

你的Header和Topbar都使用了position: fixed，会脱离文档流导致页面主体内容被遮挡，给page-content添加顶部外边距：

<style scoped>
#page-content {
  margin-top: 100px; /* 根据Header+Topbar的总高度调整数值 */
}
</style>

额外优化：组件命名规范 #

Vue官方推荐组件使用多单词命名（避免与原生HTML标签冲突），比如把Header.vue改名为AppHeader.vue，后续组件调用和维护会更清晰。

内容的提问来源于stack exchange，提问作者andrelange91