vue2.0动态添加组件

方法一、
<template>
<inputtype="text"v-model='componentName'>
<button@click='add'>clickmetoaddacomponent</button>
</template>

<script>
//引入要添加的所有组件
importcomponent1from'./components/component1.vue'
importcomponent2from'./components/component2.vue'
exportdefault{
data:function(){
return{
allComponents:[],
componentName:''
}
},
components:{
//注册所有组件
component1,
component2
}
methods:{
add:function(){
this.allComponents.push(this.componentName)
//重置输入框
this.componentName=''
},
render:function(h){//h为createElement函数，接受三个参数
//tag
//data
//children具体看文档吧
returnh('div',this.allComponents.map(function(componentName){
returnh(componentName)
}))
}
}
}
</script>

方法二、

html

<divid="app">
<button@click="add('a-component','test')">AddA</button>
<button@click="add('b-component','test')">AddB</button>
<ul>
<li:is="item.component":text="item.text"v-for="iteminitems"></li>
</ul>
</div>

javascript

varAComponent=Vue.extend({
props:['text'],
template:'<li>AComponent:{{text}}</li>'
})

varBComponent=Vue.extend({
props:['text'],
template:'<li>BComponent:{{text}}</li>'
})

newVue({
el:'#app',
components:{
'a-component':AComponent,
'b-component':BComponent,
},
data:{
items:[]
},
methods:{
add(component,text){
this.items.push({
'component':component,
'text':text,
})
}
}
})

方法三、

Vue.component('mycontent',{
props:['content'],
data(){
return{
coms:[],
}
},
render:function(h){
this.coms=[];
for(vari=0;i<this.content.length;i++){
this.coms.push(h(this.content[i],{}))
}
returnh('div',{},
this.coms)
},
});

<mycontentv-bind:content="content"></mycontent>