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 @ 2023-01-12 11:11  yuwenjing  阅读(233)  评论(0编辑  收藏  举报