如何动态创建vue组件

时间:2015-11-10 21:38:31

标签: vue.js

我已在我的vue实例中创建了一个组件。

components: {
        plan: {
            template: "#suggested-properties",
            props: ['plan', 'active'],
            computed: {
                isActive: function(){
                    return this.plan.name == this.active.name;
                }
            },
            methods: {
                setActivePlan: function(){
                    var that = this;
                    that.activeParameter= true;
                    this.active = this.plan;
                }
            }
        }
    }

有没有办法在单击按钮时通过传递数据动态创建相同组件的实例?

2 个答案:

答案 0 :(得分:4)

希望我理解你的问题,你只需要迭代一个数组左右。

data: {
  numOfComps: 0
}

并在您的HTML中:

<component v-for="comp in numOfComps></component>

检查小提琴的工作示例:

http://jsfiddle.net/gc2t8o5t/

答案 1 :(得分:0)

如果您事先不知道组件的名称,那么这是一个解决方案

<component v-for="comp in arrayOfCompsString" :is="comp"></component>

会正确替换整个标记