1.首先我的Tabs组件内容如下
<template>
<Tabs size="small" :value="currentTab" @on-click="currentTabChanged">
<TabPane label="用户" name="user">
<add-users></add-users>
</TabPane>
<TabPane label="实例" name="instance">
<add-instances ref="instanceChild"></add-instances>
</TabPane>
<TabPane label="账户" name="account">
<add-account ref="accountChild"></add-account>
</TabPane>
<TabPane label="磁盘" name="volume">
<add-volumes ref="volumeChild"></add-volumes>
</TabPane>
<TabPane label="数据库" name="database">
<add-databases ref="databaseChild"></add-databases>
</TabPane>
</Tabs>
</template>
2.这里有个click事件 作用是获取当前点击的name 根据name判断当前页面 从而调用相应接口
// 根据相应的tab名 调它下面相应的方法
currentTabChanged(name){
this.tabName=name;
if(this.tabName=='instance'){
this.$refs.instanceChild.selectAccount();
this.$refs.instanceChild.queryInstancesByGroupId();
}else if(this.tabName=='account'){
this.$refs.accountChild.queryAccountByGroupId();
}else if(this.tabName=='volume'){
this.$refs.volumeChild.selectAccount();
this.$refs.volumeChild.queryVolumesByGroupId();
}else if(this.tabName=='database'){
this.$refs.databaseChild.getAccountType();
this.$refs.databaseChild.queryDatabaseEngines();
this.$refs.databaseChild.queryDatabasesByGroupId();
}
}
接下来讲讲父组件如何获取子组件方法或值
父组件写法 首先定义一个ref
<add-instances ref="instanceChild"></add-instances>
父组件获取子组件里的属性或值
this.$refs.instanceChild.属性
this.$refs.instanceChild.方法
随便聊两句 出此篇文章的初衷 一个页面同时有6个tabs标签 为了不影响后台频繁调用导致页面卡死 所以做了个性能优化 当点击不同tabs调相应页面下的接口