导入时组件不呈现

Posted 2023-02-23

【中文标题】导入时组件不呈现

【英文标题】：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 组件模板。请帮忙。

【参考方案1】：

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

components: 
 aboutUs

【讨论】：

成功了！我将 aboutUs 包裹在 Home.vue 中。所以这意味着，我也将 aboutUs 导出到我的 App.vue 对吗？

既然aboutUs.vue是Home的子组件，Home.vue是App.vue的子组件，那么App渲染的时候，也跟着渲染About，因为基本上是grand -App 的子组件（如果该术语甚至存在于 Vue 世界中。）