vue动态创建组件的两种方法

Vue动态创建组件实例并挂载到body

⽅式⼀

import Vue from 'vue'

/**

* @param Component 组件实例的选项对象 * @param props 组件实例中的prop */

export function create(Component, props) {

const comp = new (Vue.extend(Component))({ propsData: props }).$mount()

document.body.appendChild(comp.$el) comp.remove = () => {

document.body.removeChild(comp.$el) comp.$destroy() }

return comp}

⽅式⼆

import Vue from 'vue'

export function create(Component, props) {

// 借鸡⽣蛋new Vue({render() {}}),在render中把Component作为根组件 const vm = new Vue({

// h是createElement函数，它可以返回虚拟dom render(h) {

console.log(h(Component,{ props }));

// 将Component作为根组件渲染出来

// h(标签名称或组件配置对象，传递属性、事件等，孩⼦元素) return h(Component, { props }) }

}).$mount() // 挂载是为了把虚拟dom变成真实dom // 不挂载就没有真实dom // ⼿动追加⾄body

// 挂载之后$el可以访问到真实dom document.body.appendChild(vm.$el) console.log(vm.$children);

// 实例

const comp = vm.$children[0] // 淘汰机制

comp.remove = () => { // 删除dom

document.body.removeChild(vm.$el) // 销毁组件 vm.$destroy() }

// 返回Component组件实例 return comp}

使⽤

A组件（要动态创建的组件）

B组件（操作动态创建组件的地⽅）

以上就是vue 动态创建组件的两种⽅法的详细内容，更多关于vue 动态创建组件的资料请关注其它相关⽂章！