导入时组件不呈现答案

【问题标题】：Component not rendering when importing导入时组件不呈现
【发布时间】：2019-06-06 07:33:12
【问题描述】：

我在 src/components/aboutUs.vue 中有一个组件

<template>
  <div>
    <h1>This is a component test</h1>
  </div>
</template>

我还有另一个名为 Home.vue 的 vue 文件导入了 aboutUs 组件。

  <template>
   <div class="home">
     <div>HELLO !</div>
     <aboutUs/>
   </div>
  </template>

    <script>
    import aboutUs from "@/components/aboutUs.vue";

    export default {
    name: "HomePage",
    components: aboutUs
    };
    </script>

但我的 app.vue 只呈现“HELLO！”来自 Home.vue。而不是 aboutUs 组件模板。请帮忙。

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-cli

【解决方案1】：

您必须将 App 组件包装在 {} 中。见docs

components: {
 aboutUs
}

【讨论】：

成功了！我将 aboutUs 包裹在 Home.vue 中。所以这意味着，我也将 aboutUs 导出到我的 App.vue 对吗？
既然aboutUs.vue是Home的子组件，Home.vue是App.vue的子组件，那么App渲染的时候，也跟着渲染About，因为基本上是grand -App 的子组件（如果该术语甚至存在于 Vue 世界中。）