引入多个子组件时统一引入方法

<!-- 功能区 -->
    <div class="menu-fun">
      <component :is="showContent" />
      <!-- 土壤评价 -->
      <!-- <soil-eva v-if="showContent === 'SoilEva'"></soil-eva> -->
      <!-- 地下水评价 -->
      <!-- <groundwater-eva v-if="showContent == 'GroundwaterEva'"></groundwater-eva> -->
      <!-- 专题查询 -->
      <!-- <SpecialDataFun v-if="showContent == 'SpecialDataFun'"></SpecialDataFun> -->
      <!-- 企业查询 -->
      <!-- <ExterpriseFun v-if="showContent == 'ExterpriseFun'"></ExterpriseFun> -->
    </div>

用componet 在来代替每个子组件的引入。 

同时，import 和 组件components也改为统一引入

import queryFunc from './queryFunc'

components: queryFunc,

要注意 :is=“showContent” ,showContent的赋值，showContent就是子组件的名称。

 //打开子组件方法
openZone(title, content, index) {
      // console.log(index);
      this.showContent = content;
      
    },

重点： import 的 queryFunc（是把某个文件夹下的文件都引入）:

queryFunc.js 

const modulesFiles = require.context('./query', true, /\.vue$/);
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = modulesFiles(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});

export default modules;

这里引入了 query文件夹下的文件

#补充

components： { ...queryFunc}    ,  加  ...   是因为queryFunc 是一个对象