H5W3
当前位置:H5W3 > 其他技术问题 > 正文

使用的是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,
      })
    }
  }
})

回答:

我是用v-for 加 :is绑定解决。

回答:

为什么我写的时候就会报You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 的错误,难道是因为我写在.vue里面,通过export default去操作的?

回答:

<aTest v-show=”flagA”></aTest>
<bTest v-show=”flagB”></bTest>

将flagA和flagB都初始化成false,点击A按钮和B按钮后分别变成true

回答:

我是写在父组件中的:

Vue.component('mycontent', {
        props: ['content'],
        data() {
            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)
        },
    });

调用的时候

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

那么父组件中的content变化时,就会动态加载组件了

本文地址:H5W3 » 使用的是vue2.0,如何动态添加组件。例如实现点击A按钮添加aTest组件,点击B按钮添加bTest组件。

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址