使用vue-template时组件无法呈现

Question

我有以下......

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    export default {}
</script>

header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data: () => {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

main.js

import Vue from 'vue';
import Header from './header.vue'
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

但是当我运行它时，标题组件永远不会被渲染。我错过了什么？使用vue-template webpack插件需要一些特殊的东西吗？

我已经看过几个类似的堆栈溢出，我尝试使用components: { Header }代替，但仍然无效。

我也试过......

main.vue

<template>
    <div>
        <header></header>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header": Header
      }
    }
</script>

header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data: () => {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

main.js

import Vue from 'vue';
import App from './main.vue'
Vue.component("header", Header);
new Vue(App).$mount('#km-viewport')

Answer 1

你的常见问题是：

  

[Vue警告]：不要使用内置或保留的HTML元素作为组件ID：name

在您的情况下，<header>是一个保留的HTML元素。

同样适用于<main>，<article>等等。

解决方案：将您的header组件重命名为其他名称。

示例（我将header重命名为header2）：

<强> main.vue

<template>
    <div>
        <header2></header2>
    </div>
</template>
<script>
    import Header from './header.vue'
    export default {
      components:{
        "header2": Header
      }
    }
</script>

<强> header.vue

<template>
    <div>{{ message }}</div>
</template>
<script>
    export default {
        data() {
            return {
                message: 'Dashboard'
            }
        }
   };
</script>

加分： Don't use arrow functions与data: () => {一样，会给您带来麻烦。像data() {一样使用。此规则适用于methods，computed，watchers和所有其他Vue实例选项。