vue 動態建立元件(執行時建立元件)

zyip發表於2018-01-04

 

  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
})
}

相關文章