<!-- 功能区 -->
<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 是一个对象