Unify the introduction method when introducing multiple subcomponents

<!-- 功能区 -->
    <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>

Use component instead of introducing each subcomponent. 

At the same time, import and components are also introduced uniformly.

import queryFunc from './queryFunc'

components: queryFunc,

Note: is="showContent", the assignment of showContent, showContent is the name of the subcomponent.

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

Key points : import queryFunc (imports all files in a folder):

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;

The files in the query folder are introduced here.

#Replenish

components: { ...queryFunc}, add ... because queryFunc is an object