javascript - Vue：获取组件列表

Question

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

<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 制作吗？

标签： javascriptvue.jsvue-component

Answer 1

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

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