javascript - Vue : get list of components

Question

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

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

现在我想列出菜单组件中的所有网页 block (文章部分)。

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

即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 实现吗？

Answer 1

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

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