Vue中的组件中引用组件怎么写

Question

本人接触vue不久，我想问下在VUE父组件引入子组件怎么不生效啊
App.vue 父组件

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
import Header from './components/header.vue'
export default {
  name: 'App',
  component:{
    Header
  }
}
</script>

header.vue 子组件

<template>
  <el-header>{{title}}</el-header>
</template>

<script>
export default {
  name: 'header',
  data(){
    title:"标题"
  }
}
</script>

也没用报错,只是haeder没有显示出来，是哪里写错了吗

Answer 1

data () {
    return {
      title: '标题'
    }
  }

没报错是因为你没装eslint检查代码风格

Answer 2

换个名字，不要用header，vue以为你用的是html标准里的header

Answer 3

自己研究出来了 原来那个template里面的组件标签可以随便写，问了交流群里面的朋友，说这个是vue自己去处理的，虽然我还没有理解到底是什么原理
附上正确的代码

<template>
  <div id="app">
    <header-component></header-component>
    <router-view/>
  </div>
</template>

<script>
import headerComponent from './components/header.vue'
export default {
  name: 'App',
  components:{headerComponent}
}
</script>

据说vue是自己去拆分我命名的 headerComponent变量，是这样么？