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

本人接触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没有显示出来,是哪里写错了吗

回答:

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

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

回答:

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

回答:

自己研究出来了 原来那个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变量,是这样么?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注