vue动态挂载组件

标签：vue componentInstance wrapper selector 组件 挂载

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

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

　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方法手动挂载。

标签：vue,componentInstance,wrapper,selector,组件,挂载
From： https://www.cnblogs.com/yuwenjing0727/p/17045839.html