【Html】Vue动态插入组件

html:

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

js:

<script>

const aComponent = Vue.extend({
  props: [‘text‘],
  template: ‘<li>A Component: {{ text }}</li>‘
})

const bComponent = Vue.extend({
  props: [‘text‘],
  template: ‘<li>B Component: {{ text }}</li>‘
})

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

查看实例：

https://codepen.io/kakarrot2009/pen/VxLOrQ

原文地址：https://www.cnblogs.com/mqxs/p/8901171.html