微客导航 » 文章资讯 » vue 动态创建组件的两种方法

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

2023-07-07 12:32:03 188

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

方式一

importVuefrom'vue'

/**
*@paramComponent组件实例的选项对象
*@paramprops组件实例中的prop
*/
exportfunctioncreate(Component,props){
constcomp=new(Vue.extend(Component))({propsData:props}).$mount()

document.body.appendChild(comp.$el)

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

comp.$destroy()
}

returncomp
}

方式二

importVuefrom'vue'

exportfunctioncreate(Component,props){
//借鸡生蛋newVue({render(){}}),在render中把Component作为根组件
constvm=newVue({
//h是createElement函数，它可以返回虚拟dom
render(h){
console.log(h(Component,{props}));

//将Component作为根组件渲染出来
//h(标签名称或组件配置对象，传递属性、事件等，孩子元素)
returnh(Component,{props})
}
}).$mount()//挂载是为了把虚拟dom变成真实dom
//不挂载就没有真实dom
//手动追加至body
//挂载之后$el可以访问到真实dom
document.body.appendChild(vm.$el)

console.log(vm.$children);

//实例
constcomp=vm.$children[0]

//淘汰机制
comp.remove=()=>{
//删除dom
document.body.removeChild(vm.$el)

//销毁组件
vm.$destroy()
}

//返回Component组件实例
returncomp
}

使用

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

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

返回顶部
3162201930
czq8825@qq.com

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

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

方式一

方式二

使用

{{title}}

随机推荐