vue动态挂载组件

平时我们渲染组件都是通过路由的方式。但有时候不太满足需要,需要我们手动去挂载组件。方式如下:

通过调用一个方法去实现动态挂载组件:

复制代码
 import Vue from "vue"
 import jhForm from "@/views/bizs/form-templates/jh-form"
loadFormTemplate(selector, entryUri, params) {
    let wrapper = selector;
    if (typeof wrapper === "string") {
      wrapper = document.querySelector(wrapper);
    }

    if (!wrapper) {
      window.logger.error("无法找到指定的容器", selector);
      return;
    }
    wrapper.innerHTML = "";
    const JhFormComponent = Vue.extend(jhForm);
    const componentInstance = new JhFormComponent({
    // el:
wrapper,
    propsData: { entry: entryUri, uniqueId: params.uniqueId }
   });
   componentInstance.$mount(selector)
return componentInstance;
},
复制代码

 new 实例子

propsData像组件里传递props数据。
特别注意创建实例的时候参数若有el,则组件会渲染。所以最好采取$mount方法手动挂载。
posted @   yuwenjing  阅读(247)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示