iview Tabs组件 点击tab标签页调用相应接口（顺带讲讲父组件获取子组件方法或值）

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调相应页面下的接口