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 } 
}) 

With my verこれは私のアプリケーションでReact <Header />をレンダリングするようなものでなければなりませんが、これはそのようには動作しません。 DOMにレンダリングされる内容は、#appの中にある平文の<header></header>タグですが、それはまったく理想的ではありません。

どのような重要なポイントがありますか？ありがとう！

Answer 1

existing HTML tagという名前のコンポーネントに名前を付けることはできません。 Vueの開発版はこれをコンソールで警告します。

[Vueが警告]：コンポーネント IDとして組み込みまたは予約済みのHTML要素を使用しないでください：ヘッダー

は、他のいくつかの名前であなたのheaderコンポーネントの名前を変更します。