Vue组件不显示vue js答案

【问题标题】：Vue component not showing vue jsVue组件不显示vue js
【发布时间】：2018-06-07 18:33:24
【问题描述】：

这是我的 header.vue：

<template>
    <div>
        <h2>this is header h2</h2>
    </div>
</template>
<script>
export default {
  name: 'Header',
  data () {
    return {
      data: 'this is header'
    }
  }
}
</script>

这是我的 HelloWorld.vue：

<template>
  <div class="hello">
    <header/>

  </div>
</template>

<script>

import Header from './Header'  
export default {
  name: 'HelloWorld',
  //после того как импортировали компоент - вот здесь указываем его явно:
  components: {
      Header
    },
  data () {

    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

这是我的文件夹结构：

但标题组件没有显示 - 没有错误，只是没有显示。我该怎么办？？

【问题讨论】：

您的main.js 中有什么内容？你有两个模板，但你需要一个主页，告诉 Vue 继续渲染自己（例如import HelloWorld from "/HelloWorld.vue"; new Vue({ el: '#main', render: h => h(HelloWorld) });
你能提供使用你的App.vue和main.js吗？

标签： vue.js

【解决方案1】：

如果你这样定义你的组件：

components: {
  Header
},

在您的模板中这样调用它：<Header /> 大写。

~~如果你想使用像<header></header>这样的kebab-case，请像这样定义你的组件：~~

components: {
  'header': Header
},

编辑
根据@MaxLyashuk 的评论，在这种情况下，Vue 组件 (source) 的命名约定是不区分大小写的。

<Header /> 大写起作用的事实是因为<header> 是 html 标记的保留字。

【讨论】：

没关系。您可以将组件注册为Header 并使用header 或Header 它会起作用！它的工作方式与 html 相同。 html 不区分大小写。
将Header 传递到您的组件属性中，您可以在模板中将其用作
。它不显示的原因基本上是header标签是内置的。他应该将他的组件重命名为其他名称，或者像其他人一样为其添加前缀。