动态引入组件并调用子组件方法

最底层index文件所在位置src\views\portal\portlet\intentionSection\index.js 

//index.js
export {default as intentionSection} from './intentionDataList';

所有底层index文件汇总的index文件所在位置src\views\portal\portlet\index.js 

//index.js
//导入模块
import {goalSection} from "./goalSection/index";
import {intentionSection} from "./intentionSection/index";
import {topicSection} from "./topicSection/index";
import {strateGoalCount} from "./strateGoalSection/index";

//导出模块
export {goalSection,intentionSection,topicSection,strateGoalCount};

 通过引入汇总的index得到每个组件

// 引入所有组件

import {intentionSection,topicSection, goalSection, strateGoalCount} from "@/views/portal/portlet";

export default {
  name: "contents",
  //注册组件
  components: {
    intentionSection,
    topicSection,
    goalSection,
    strateGoalCount
  },
}

//column.linkUrl是遍历的组件名称，:is是关键词
<template>
    <!-- keep-alive 失活的组件将会被缓存！-->
    <colComponent :ref="'ref'+column.linkUrl" :is="column.linkUrl" keep-alive></colComponent>

</template>

 需要调用子组件方法的话，先输出$refs,看数据结构，下面是我的一个例子

 console.log("输出的$refs对象"+$refs)
for (let i in this.$refs.refstrateGoalCount) {
          this.$refs.refstrateGoalCount[i].reloadDrawing();
    }

 *以上就是我引用多个子组件并且调用子组件方法的例子，希望能帮到像我一样的人