Vue.js 如何将多个组件添加到Vuejs中的父组件

假设我们有100个组件。我们通常会将HTML标记中的组件选择器/名称添加到父组件的模板中。但这里我们有100个组件，所以有没有任何动态方法添加它们？？？

有一个Vue标记：

<component :is="myComponent"></component>

其中myComponent是组件名称或整个组件对象。您可以使用组件名称创建阵列，并使用v-for动态渲染它们。

---

有关动态组件的详细信息，请参阅。

是的，有一种方法可以动态添加组件

一般来说，有三件事。 1.实例化组件 2.安装组件 3.将其添加到dom树中

var ComponentClass = Vue.extend(Component)
var instance = new ComponentClass() //instantiate
instance.$mount()  //mount
this.$refs.container.appendChild(instance.$el) //add to dom

---

请不要这样做。

诀窍很容易掌握，但这有点像是在一张结婚请柬上贴上新娘的名字——没有说服力。你需要有时间做出承诺。包含大量

标记的模板将无法理解和维护。

这很有效

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

我不明白你在问什么，你能举例说明一下你目前正在手动做什么吗？在该示例中，饼图、条形图是组件。我们在主组件中分别使用和标记添加它们。但是如果我们有100个这样的组件呢。是否有任何动态的方法来添加它们。我仍然不明白，在您发布的示例中没有饼或条。在该示例中，饼图、条形图是组件。我们在主组件中分别使用和标记添加它们。但是如果我们有100个这样的组件呢。是否有任何动态方式添加它们**很抱歉我忘了保存**所以您有100个不同的组件？Max Sinev给出了一个在这种情况下应该有效的答案，但是你仍然需要写一个所有组件的列表。可能有一种方法比一开始就拥有这100个组件更好，但根据给定的信息很难判断。啊，我可能误解了这个问题，并回答了是否可以通过编程方式添加组件。这是一个很好的解决方案。不知道它存在。

components=['pie'，'bar']

这不起作用，因为您在父组件的

Vue.component

或

components

部分注册了组件？是的，我已经添加了它们<代码>在标记中使用组件之前，应该使用代码中提供的方法之一注册组件。下面是如何实现这一点的示例：我非常同意您的看法，

组件

仅在少数情况下有用。但解决方案是只应用带有

v-for

指令的单个组件标记，这将提高代码理解，而不是在标记中添加100个类似组件（也会导致增加应用程序包的大小）。一般来说，它不需要

div

包装器，请参阅我的回复评论中的我的JSFIDLE链接。我想你可以把我的答案标为正确答案。