How to write a reference component in a component in Vue

not long after I came into contact with vue, I would like to ask why it doesn"t work to import child components in VUE parent components
App.vue parent components

<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 subcomponents


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

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

didn"t report an error, but haeder didn"t show it. Did you write something wrong

?
Apr.02,2021

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

No error is reported because you do not have eslint check code style


change your name, do not use header,vue to think that you are using header in the html standard


I worked out that the component tags in the original template can be written freely, and asked my friends in the communication group that vue handled this by himself, although I still don't understand the principle
attach the correct code

.
<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>

it is said that vue splits the headerComponent variable I named himself, isn't it?

Menu