el-tab-pane实现单击某个tab请求某个活动标签的接口（防止在父组件请求了全部接口，数据量大的时候会造成请求超时）

需求介绍：遇到一个比较有意思的需求，大概是这样，有一个按钮请求一个列表，这个列表里包含四个tab 大致结构是 一个总的list，里面用el-tab-pane管理四个tab（默认点击这个xx列表会把四个tab里created需要请求的接口都请求了，比较耗时）

需求是想在点击某个tab 的时候才请求列表数据

 

思路：

我首先想到的是有没有封装好的方法，或者是在子组件能直接拿到activeName（活动的标签），试了试貌似不行，

其次因为公司的这个请求大部分是每个tab代表某一种状态，所以我想在父组件里请求所以的数据在控制活动标签传给子组件，但是这样改动比较大（父组件是可以直接拿到活动的active的）@tab-click=""

最后想到的办法用watch监听，这个活动的tab， 传到子组件子组件再次监听如果监听到自己的tab 然后请求

相关代码：

父组件：

//父组件demo
<el-tab-pane label="tabOne" name="tabOneName">
    //子组件
    <son ref="son" :activeNameTab="activeNameTab"></son>
</el-tab-pane>

<el-tab-pane label="tabTwo" name="tabTwoName">
    //子组件
    <sonTwo ref="sonTwo" :activeNameTab="activeNameTab"></sonTwo>
</el-tab-pane>


watch: {
    activeName: {
        handler(newValue, oldValue){
            this.activeNameTab = JSON.parse(JSON.stringify(this.activeName));
            console.log(this.activeNameTab)
        },
        deep:true
    }
},

son子组件：

props: {
    activeNameTab:{
        type:String,
        required:true
    }
},
watch:{
    activeNameTab: {
    handler(newValue, oldValue){
        this.activeNameTab = JSON.parse(JSON.stringify(this.activeNameTab));
        if(this.activeNameTab == 'son'){
            /*
            需要在created处理的请求
            */
        }
    },
    deep:true
}
}

sonTwo子组件：

props: {
    activeNameTab:{
        type:String,
        required:true
    }
},
watch:{
        activeNameTab: {
        handler(newValue, oldValue){
            this.activeNameTab = JSON.parse(JSON.stringify(this.activeNameTab));
            if(this.activeNameTab == 'sonTwo'){
                  /*
                    需要在created处理的请求
                   */
            }
        }
        deep:true
    }
}
 这样基本上可以实现需求，欢迎交流