vue.js - 使用的是vue2.0，如何动态添加组件。例如实现点击A按钮添加aTest组件，点击B按钮添加bTest组件。

问题描述

问 题

使用的是vue2.0，如何动态添加组件。例如实现点击A按钮添加<aTest></aTest>,点击B按钮添加<bTest></bTest>。
使用v-for只能循环写单个组件,使用动态组件也只能不断切换单个组件,想动态添加多个不同的组件暂时没想到怎么做,希望大家可以帮帮忙，或者交流一下，谢谢!

解决方案

可以把組件名稱記起來，就可以根據組件名稱來渲染特定組件（數據驅動）

預覽

html

  <div id="app">
    <button @click="add('a-component', 'test')">Add A</button>
    <button @click="add('b-component', 'test')">Add B</button>
    <ul>
      <li :is="item.component" :text="item.text" v-for="item in items"></li>
    </ul>
  </div>

javascript

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

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


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.js - 使用的是vue2.0，如何动态添加组件。例如实现点击A按钮添加aTest组件，点击B按钮添加bTest组件。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！