VUE Tabs 异步加载/重新加载

今天遇到一个问题,前端使用Vue Tab 主件时,如果使用主件引入方式,则加载会一次加载,也就是说向后台请求可能是好多个,因为每个Tab都会有请求后台的数据,假设用户进入只看一个Tab 那么其他的Tab应该不加载,这样能减轻后台压力,也能有刷新的功能,不是挺好;
搞了半天自己通过网上的一些例子,然后做了一些优化.代码如下,高手勿喷^^

<template>
    <div class="containerPadding">
        <div class="wrap-container mn">
            <el-tabs v-model="activeTab" type="card" @tab-click="tabClick">

                <el-tab-pane label="设备录入" name="add">
                    <span slot="label">
                        <i class="icon-qidongxiangfenxi"></i>&ensp;设备管理
                    </span>
                    <baseDeviceManager v-if="addIs"></baseDeviceManager>
                </el-tab-pane>
                <el-tab-pane label="设备授权" name="bind">
                    <span slot="label">
                        <i class="icon-qidongxiangfenxi"></i>&ensp;设备授权
                    </span>
                    <bindDeviceManager v-if="bindIs"></bindDeviceManager>
                </el-tab-pane>

            </el-tabs>
        </div>
    </div>
</template>

<style>
.mn .el-tabs__content {
    height: 80vh;
}
.mn .ue-menu-right {
    top: 0;
}
</style>

<script>
import baseDeviceManager from "@/components/terminal/baseDeviceManager";
import bindDeviceManager from "@/components/terminal/bindDeviceManager";

export default {
    components: {
        baseDeviceManager,
        bindDeviceManager
    },
    data() {
        return {
            /*定义当前活动Tab */
            activeTab: 'add',
            /*定义前一个活动Tab,初始化默认为 ActiveTab */
            oldTab: 'add',
            /*定义Tab是否加载-第一个默认加载 */
            addIs: true,
            bindIs: false
        };
    },
    methods: {
        tabClick(tab, event) {
            this[tab.name + "Is"] = true;
            /** 
			 * 这里是为了解决如果有多个Tab,那么就需要每次都判断,代码量太多
			 * 所以定义了一个固定的规则,就是在tabName后追加一个固定字段
			 * 定义v-if属性true/false 
			 * oldTab是为了记录上一个打开的Tab 这样每次只需要把上次的那个tab关闭就行
			 * 这时候,只需要在data中定义特定的***Is 属性即可 
			 */
            this[this.oldTab + "Is"] = false;
            this.oldTab = tab.name;
        }
    }
}
</script>