vue 动态插入组件实例

<div id="app">
  <p>{
     {
      message }}</p>
  <button @click="add('a-component', '我是A')">添加A组件</button>
  <button @click="add('b-component', '我是B')">添加B组件</button>
  <component :is="item.component" :text="item.text" v-for="item in items"></component>
</div>

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
  }
})