vue 动态创建组件(运行时创建组件)

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

})

}

以上是 vue 动态创建组件(运行时创建组件) 的全部内容, 来源链接: utcz.com/z/380819.html

回到顶部