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"> </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