Vue.js：为什么不渲染组件？答案

【问题标题】：Vue.js: Why isn't component rendered ?Vue.js：为什么不渲染组件？
【发布时间】：2018-12-02 08:48:05
【问题描述】：

我编写了一个非常简单的 vue.js 应用程序来学习如何使用 vue 文件。

代码如下：

App.vue

<template>
    <article></article>
</template>

<script>

export default {
    data: function() {
        return {

        }
    }
}
</script>

<style>

</style>

main.js：

import Vue from 'vue'
import App from './App.vue'
import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

new Vue({
  render: h => h(App),
}).$mount('#app');

Article.vue：

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

我希望在浏览器中看到“bla bla”。但是，当我打开浏览器时，我看到了白页。控制台说：

[Vue 警告]：不要使用内置或保留的 HTML 元素作为组件 id: 文章

当我打开 Vue 开发工具时，我看到的是：

没有添加文章组件。你知道怎么解决吗？

【问题讨论】：

标签： vue.js

【解决方案1】：

不要使用 html 标签article 作为组件名称。重命名它，它应该呈现。

例如：

Vue.config.productionTip = false;

Vue.component('article2', {
  template: '<div>Hi there</div>'
});

Vue.component('app', {
  template: '<article2></article2>'
})

new Vue({
  render: h => h('app'),
}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

在 main.js 中调用组件不是最好的结构 + 你不要在 Vue 实例中调用他，例如：

Article.vue

<template>
    <div>
        <h1>bla bla</h1>
    </div>
</template>

<script>
    export default {
        name: 'article'
    }
</script>

App.vue

<template>
    <article></article>
</template>

<script>
import article from './Article';

export default {
    components: {
      article,
   },
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

我希望这对你有用。

【讨论】：

【解决方案3】：

那是因为你只是在渲染 App：

render: h => h(App),

您应该在 App 中导入文章并使用如下：

<template>
    <article></article>
</template>

<script>
import Article from './Article.vue'
export default {
    components: { article: Article },
    data: function() {
        return {

        }
    }
}
</script>

并从 App 中删除以下内容：

import Article from './Article.vue';

Vue.config.productionTip = false;

Vue.component('article', Article);

但是文章是html5元素，所以我建议你使用另一个名字，比如：

components: {
  myArticle: Article
}

<my-article></my-article>

【讨论】：