Vue：获取组件列表答案

【问题标题】：Vue: get list of componentsVue：获取组件列表
【发布时间】：2020-05-28 01:52:36
【问题描述】：

我的单页网站有简单的组件结构：

<template>
  <div id="app">
    <header />
    <section-about />
    <section-warranty />
    <section-advantages />
    <section-service />
    <section-review />
    <footer />
    <menu />
  </div>
</template>

现在我想在菜单组件中列出所有网页块（文章部分）。

当然，我可以手动编写此列表，但我想知道是否可以解析我的所有组件以获取某些键，然后从中生成列表。这样我的菜单列表将基于组件，并且如果我添加一些新的文章组件或删除一个组件，它将自动更新。

即Warranty.vue组件：

<template>
   <section class="article warranty">
      ...blah blah blah...
   </section>
</template>

<script>
export default {
   data() {
      return {
         article-key: 'warranty', // <-- key for parsing
         article-title: 'Warranty'
      }
   }
}
</script>

然后其他文章组件同理……

现在是我的Menu.vue 组件：

<template>
   <ul class="menu">
      <li v-for="(article, index) in articles" :key="index">
         <a href="#">{{ article.title }}</a>
      </li>
   </ul>
</template>

<script>
export default {
   data() {
      return {
         articles: []
      }
   },
   methods: {
      parseComponents() {
         this.articles = ... <-- for each Vue component if has article-key data then return
      }
   },
   created() {
      parseComponents()
   }
}
</script>

或者我应该将所有文章移动到单独的文件夹中吗？这可以用 Vue 制作吗？

【问题讨论】：

如果所有可能的组件都是给定父组件的子组件 - 您可以在父组件中使用this.$children 枚举它们。否则，您将不得不从根 Vue 实例开始遍历整个组件层次结构 - 您将只能枚举活动组件，但不能枚举隐藏在 v-if 后面的组件。

标签： javascript vue.js vue-component

【解决方案1】：

我找到了一个解决方案。

<template>
   <div class="menu">
      <ul class="menu-list">
         <li v-for="(article, index) in articles" :key="index">
            <a href="#" @click.prevent="article.el.scrollIntoView({ behavior: 'smooth', block: 'end'})">{{ article.title }}</a>
         </li>
      </ul>
   </div>
</template>

<script>
export default {
   data() {
      return {
         articles: []
      }
   },
   mounted() {
      this.articles= this.$parent.$children.map(article=> {
         return article.$data.articleKey == 'article' ? {
            title: article.$data.articleTitle,
            offsetTop: article.$el.offsetTop,
            el: article.$el
         } : false;
      })
   }
}
</script>

此外，使用正则表达式从整个文件夹中找到按名称解析组件的方法也会很有趣。

【讨论】：

【解决方案2】：

从定义组件列表开始：

computed: {
  components() {
    return ['about', 'warranty', 'advantages', 'service', 'review']
  }
}

以这种方式渲染它们 (https://vuejs.org/v2/api/#is)

<component v-for="component in components" :key="component" :is="component" />

使用这种方法，您应该只编写一次组件列表

要在 Menu 组件上使用它们 - 使 prop (https://vuejs.org/v2/api/#props) 传递它们

【讨论】：

【解决方案3】：

如果您在 this.articles 中有所有这些值，您可以这样做：

this.articles.map(el => {
    if(el.article-key) {
        return <MyComponent/>
    }
})

【讨论】：