Question

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

Answer 1

有一个Vue标签：

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

myComponent 是组件名称或整个组件对象。您可以使用组件名称创建数组，并使用 v-for 动态渲染它们。有关动态组件的详细信息，请参阅Vue Docs。

Answer 2

请不要这样做。 <component :is>诀窍很方便，但这有点像在一个粘性标签上以新娘的名字收到婚礼邀请 - 这并不令人信服。你需要在某个时候做出承诺。包含大量<component :is>代码的模板无法理解和维护。

Answer 3

这有效!!!!!

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

Answer 4

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

一般来说，有三件事。 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

如何在Vuejs中向父组件添加多个组件

4 个答案: