首页 > 其他 > 详细

vue2.0动态添加组件

时间:2017-12-14 12:33:56      阅读:197      评论:0      收藏:0      [点我收藏+]
方法一、
<template> <input type="text" v-model=‘componentName‘> <button @click=‘add‘>click me to add a component</button> </template> <script> // 引入要添加的所有组件 import component1 from ‘./components/component1.vue‘ import component2 from ‘./components/component2.vue‘ export default { data: function() { return { allComponents: [], componentName: ‘‘ } }, components: { // 注册所有组件 component1, component2 } methods: { add: function() { this.allComponents.push(this.componentName) // 重置输入框 this.componentName = ‘‘ }, render: function(h) { // h 为 createElement 函数,接受三个参数 // tag // data // children 具体看文档吧 return h(‘div‘,this.allComponents.map(function(componentName) { return h(componentName) })) } } } </script>
方法二、

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.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变化时,就会动态加载组件了

 

vue2.0动态添加组件

原文:http://www.cnblogs.com/h2zZhou/p/8036953.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!