vue.js - 迭代一个组件数组（并挂载它们）

Question

如何安装在数组中“声明”的组件？

例子：

<template>
  <div v-for="component in COMPONENTS_ARRAY" :key="component">
    <!-- I want it to iterate through COMPONENTS_ARRAY and mount them here -->
    <!-- Not working. No errors but doesn't render -->
    {{ component }}
  </div>
</template>

<script>
import AboutPage from './about-page.vue'
import SomePopup from './some-popup.vue'

const COMPONENTS_ARRAY = [
  '<AboutPage :title="title" />',
  '<AboutPage title="This is a Title" />',
  '<SomePopup description="This is a description" />',
  '<SomePopup header-color="red" />'
]

export default {
  props: {
    title: {
      type: String
    }
  },
  data () {
    return {
      COMPONENTS_ARRAY
    }
  },
  components: {
    AboutPage,
    SomePopup
  }
}
</script>

所以基于上面的例子，我想要挂载 4 个组件实例。

我有什么办法可以做到这一点？？

标签： vue.js