用组件的方法搭建element ui tabs以及tabs的刷新处理

用组件的方法搭建

HTML

<el-container>
     <el-main>
	  	<template>
	    	<el-tabs v-model="activeName" @tab-click="handleClick" v-show="showtab"  >
	        	<el-tab-pane  v-for="(page, index) in pages"   v-bind:key="index"   :label="page.label"   :name="page.name"  >
	          		<!--循环生成子页面-->
	           		 <components :is="page.name" v-if="page.name == nowPage"></components>
	         	</el-tab-pane>
	    	</el-tabs>
	  </template>
  	</el-main>
</el-container>

VUE

// 导入相关的路由
import CasePage from '@/components/outpatientDoctor/CasePage.vue'
import InspectionApplication from '@/components/outpatientDoctor/InspectionApplication.vue'
import CheckOutApplication from '@/components/outpatientDoctor/CheckOutApplication.vue'
import OutpatientDiagnosis from '@/components/outpatientDoctor/OutpatientDiagnosis.vue'	
import DisposalApplication from '@/components/outpatientDoctor/DisposalApplication.vue'
import PatentPrescription from '@/components/outpatientDoctor/PatentPrescription.vue'	
import HerbalPrescription from '@/components/outpatientDoctor/HerbalPrescription.vue'
import AfterDiagnosis from '@/components/outpatientDoctor/AfterDiagnosis.vue'
import ExpenseQuery from '@/components/registerCharge/expenseQuery.vue'
	
export default {
	name: 'tabZujian',
	components:{
		CasePage,
		InspectionApplication,
		CheckOutApplication,
		OutpatientDiagnosis,
		DisposalApplication,
		PatentPrescription,
		HerbalPrescription,
		AfterDiagnosis,
		ExpenseQuery
	},
    data() {
		return {
			activeName: "casePage",//第一个加载的页面
			nowPage: "casePage",
			showtab:false,
			pages: [
				//所有子页面信息
				 {name: "casePage",label: "病例首页"},
				 {name: "inspectionApplication",label: "检查申请"},
				 {name: "checkOutApplication",label: "检验申请"},
				 {name: "outpatientDiagnosis",label: "门诊确诊"},
				 {name: "disposalApplication",label: "处置申请"},
				 {name: "patentPrescription",label: "成药处方"},
				 {name: "herbalPrescription",label: "草药处方"},
				 {name: "afterDiagnosis",label: "诊毕"},
				 {name: "expenseQuery",label: "费用查询"}
			 ]
		}
    },
     methods: {
		handleClick(tab, event) {
			this.nowPage=tab.name
		}
	}
}	

组件刷新

用组件的方法搭建element ui tabs

HTML

<el-container>
     <el-main>
	  	<template>
	    	<el-tabs v-model="activeName" @tab-click="handleClick" v-show="showtab" >
	        	<el-tab-pane  v-for="(page, index) in pages"   v-bind:key="index"   :label="page.label"   :name="page.name"  v-if="isRouterAlive">
	          		<!--循环生成子页面-->
	           		 <components :is="page.name" v-if="page.name == nowPage"></components>
	         	</el-tab-pane>
	    	</el-tabs>
	  </template>
  	</el-main>
</el-container>

VUE

// 导入相关的路由
import CasePage from '@/components/outpatientDoctor/CasePage.vue'
import InspectionApplication from '@/components/outpatientDoctor/InspectionApplication.vue'
import CheckOutApplication from '@/components/outpatientDoctor/CheckOutApplication.vue'
import OutpatientDiagnosis from '@/components/outpatientDoctor/OutpatientDiagnosis.vue'	
import DisposalApplication from '@/components/outpatientDoctor/DisposalApplication.vue'
import PatentPrescription from '@/components/outpatientDoctor/PatentPrescription.vue'	
import HerbalPrescription from '@/components/outpatientDoctor/HerbalPrescription.vue'
import AfterDiagnosis from '@/components/outpatientDoctor/AfterDiagnosis.vue'
import ExpenseQuery from '@/components/registerCharge/expenseQuery.vue'
	
export default {
	name: 'tabZujian',
	components:{
		CasePage,
		InspectionApplication,
		CheckOutApplication,
		OutpatientDiagnosis,
		DisposalApplication,
		PatentPrescription,
		HerbalPrescription,
		AfterDiagnosis,
		ExpenseQuery
	},
	provide () {                        
		return {
			reload: this.reload                                              
		}
	},
    data() {
		return {
			isRouterAlive: true ,
			activeName: "casePage",//第一个加载的页面
			nowPage: "casePage",
			showtab:false,
			pages: [
				//所有子页面信息
				 {name: "casePage",label: "病例首页"},
				 {name: "inspectionApplication",label: "检查申请"},
				 {name: "checkOutApplication",label: "检验申请"},
				 {name: "outpatientDiagnosis",label: "门诊确诊"},
				 {name: "disposalApplication",label: "处置申请"},
				 {name: "patentPrescription",label: "成药处方"},
				 {name: "herbalPrescription",label: "草药处方"},
				 {name: "afterDiagnosis",label: "诊毕"},
				 {name: "expenseQuery",label: "费用查询"}
			 ]
		}
    },
     methods: {
     	reload () {
			this.isRouterAlive = false;            //先关闭，
			this.$nextTick(function () {
				this.isRouterAlive = true;         //再打开
			}) 
		},
		handleClick(tab, event) {
			this.nowPage=tab.name
		}
	}
}	

在对应的tab组件中写

export default {
    inject:['reload'],  //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

在方法块中调用

this.reload();

解决父组件将子组件作为弹窗调用只执行一次created的问题

第一调用渲染子组件后，不再对子组件的created进行调用

使用

this.dialogVisible1=true