代码
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="item in means" :label="item.name" :name="item.name" :key="item.value" :component="item.component">
<component :is="item.component" ></component>
</el-tab-pane>
</el-tabs>
</template>
<script>
const provinceCont = resolve => require(['./provinceTab.vue'], resolve);
const prisonCont = resolve => require(['./prisonTab.vue'], resolve);
const departmentCont = resolve => require(['./departmentTab.vue'], resolve);
export default {
data() {
return {
means:[
{name: '省份',component:provinceCont,value:'省份'},
{name: '监狱' ,component:prisonCont,value:'监狱'},
{name: '部门', component:departmentCont,value:'部门'}
],
activeName: '省份',
};
},
methods: {
handleClick (tab, event) {
// 异步加载组件
let getCompoentIndex = this.means.findIndex(x => x.name === tab.name);
let component = this.means[getCompoentIndex].component;
if (!this.items[getCompoentIndex].loading) {
this.items[getCompoentIndex].loading = true;
Vue.component(component, function (resolve, reject) {
// setTimeout(function () {
require([`./${component}.vue`], resolve)//比如 abc.vue
// }, 1000)
})
}
}
}
};
</script>
这应该属于自定义事件了,你可以通过来 emit 触发