Javascript Vue：获取组件列表

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

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

然后其他文章组件以同样的方式

现在是我的

菜单.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>

<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>

导出默认值{
数据（）{
返回{
条款：[]
}
},
方法：{
解析组件（）{
this.articles=…如果在
this.articles
中有所有这些值，则可以执行以下操作：

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

this.articles.map（el=>{
if（el.article key）{
返回
}
})
从定义组件列表开始：

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

以这种方式渲染它们（）



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

要在菜单组件-makeprop（）上使用它们来传递它们，我找到了一个解决方案

<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>






导出默认值{
数据（）{
返回{
条款：[]
}
},
安装的（）{
this.articles=this.$parent.$children.map（article=>{
返回文章。$data.articleKey=='article'{
标题：article.$data.articleTitle，
offsetTop：文章。$el.offsetTop，
el:文章。$el
}：假；
})
}
}

另外，使用regex从整个文件夹中找到按名称解析组件的方法也很有趣。
如果所有可能的组件都是给定父组件的子组件，则可以使用
this.$children
在父组件中枚举它们。否则，您必须从e根Vue实例-您将能够仅枚举活动组件，但不能枚举隐藏在
v-if
后面的组件。
<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>