【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

extend 是构造一个组件的语法器.
你给它参数它给你一个组件 然后这个组件

你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用<apple>组件

var apple = Vue.extend({
    ....
 })

Vue.component('apple',apple) 

也可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({    
      components:{
        apple:apple
      }
   })

查看实例：

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

以下是其他方法(没有试过)：参考https://www.cnblogs.com/h2zZhou/p/8036953.html

方法一、

<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: function() {
            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变化时,就会动态加载组件了