vue 動態建立組件(運行時建立組件)

 

  function mountCmp (cmp, props, parent) {
    if (cmp.default) {
      cmp = cmp.default
    }
    cmp = Vue.extend(cmp)
    let node = document.createElement('div')
    parent.appendChild(node)
    new cmp({ // eslint-disable-line
      el: node,
      propsData: props,
      parent: this
    })
  }

 

 

      import('../components/title').then(cmp => {
        mountCmp.call(this, cmp, {title: 123456}, document.querySelector('.child-host'))
        mountCmp.call(this, cmp, {title: 123456}, document.querySelector('.child-host'))
      })

 

 

 

//title.vue

<template>
    <div class="title">
      <div class="title-icon"></div>
      <div class="title-txt">{{title}}</div>
      <div class="title-dotline">&nbsp;</div>
    </div>
</template>


<script>
export default {
  props: ['title']
}
</script>

 

function mountCmp ( cmp, props, parent) {

cmp = Vue. extend( cmp. default)

let node = document. createElement( 'div')

parent. appendChild( node)

new cmp({ // eslint-disable-line

el: node,

propsData: props,

parent: this

})

}