Vue基础-在其他组件中使用组件

Question

我正在尝试在另一个组件内部使用Vue组件（标头），但是它无法正确呈现它。

我的代码：

App.vue：

<template>
  <div id="app">
    <header></header>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

Header.vue：

<template>
    <nav class="nav">
         <div class="container">
             <div class="nav-left">
                 <p class="title"></p>
             </div>
         </div>
     </nav>
</template>

<script>
export default {
  name: 'header'
}
</script>

而且，我在main.js中注册了我的组件，文件如下所示：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.component('header', require('./components/Header'))

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

以我非常有限的理解，这应该就像<Header />在我的应用程序中渲染一个React一样，但是这种方式无法正常工作。呈现给DOM的是<header></header>我内部的普通标签#app，这并不完全理想。

我缺少什么关键点？谢谢！

Answer 1

您不能使用现有HTML标签的名称来命名组件。Vue的开发版本将在控制台中警告您。

[警告]：请勿将内置或保留的HTML元素用作组件ID：标头

header用其他名称重命名您的组件。