html:

     
  
      
{
   { message }}
  
      添加A组件  
      添加B组件  
      
     

js:

<script>

const aComponent = Vue.extend({  props: ['text'],  template: '
A Component: {
   { text }}
'})const bComponent = Vue.extend({  props: ['text'],  template: '
B Component: {
   { text }}
'})new Vue({  el: '#app',  data () {    return {      message: 'Hello Vue.js!',      items: []    }  },  methods: {    add (name, text) {       this.items.push({         component: name,         text: text       })    }  },  components: {    aComponent,    bComponent  }})

</script>

重点是使用了:

Vue.extend

extend 是构造一个组件的语法器.

你给它参数它给你一个组件 然后这个组件

你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用<apple>组件

var apple = Vue.extend({    .... })

Vue.component('apple',apple)

也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({          components:{        apple:apple      }   })

查看实例：

 

 

以下是其他方法(没有试过)：参考

方法一、

方法二、

html  
     
    
      Add A    
      Add B    
      
      
       
    
      
  
     
javascriptvar AComponent = Vue.extend({  props: ['text'],  template: '
A Component: {
   { text }}
'})var BComponent = Vue.extend({  props: ['text'],  template: '
B Component: {
   { text }}
'})new Vue({  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: function() {            return {                coms: [],            }        },        render: function(h) {            this.coms = [];            for(var i = 0; i < this.content.length; i++) {                this.coms.push(h(this.content[i], {}))            }            return h('div', {},                this.coms)        },    }); //调用的时候
     //那么父组件中的content变化时,就会动态加载组件了