VUE 根据需要动态加载单文件组件

根据需要动态加载组件

核心方法

    // 动态添加需要的版式
    registerComponent(templateName) {
      return import(`../component/plate/mainBoard/${templateName}.vue`).then(component => {
        const constructor = Vue.extend(component.default);
        const instance = new constructor();

        // 传入数据 dataObj 为 props 
        instance.dataObj = this.form;
        
        // 监听抛出的数据  this.$emit("emitStream", {  data: "data" });
        instance.$on("emitStream", params => {
          //  params 为组件内部抛出的数据
          
        });

        // 挂载到 ID 为 plateContainer 的DOM元素
        instance.$mount("#plateContainer");

        // console.log(templateName + " 加载成功");
      });
    },

向组件传入数据

// 传入数据 dataObj 为 props 
 instance.dataObj = this.form

组件向父组件传递数据

 // 监听抛出的数据  this.$emit("emitStream", {  data: "data" });
 instance.$on("emitStream", params => {
   //  params 为组件内部抛出的数据
   
 });

挂载在页面

<el-scrollbar ref="elscrollbar" style="height:100%;">
        <div id="plateContainer">

        </div>
</el-scrollbar>

调用

 this.registerComponent("myComponent"); // myComponent 为组件名称