<template>
  <div id="MyHomework">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="实时作业" name="first">
        <child1 v-if="isChildUpdate1"></child1>
      </el-tab-pane>
      <el-tab-pane label="历史作业" name="second">
        <child2 v-if="!isChildUpdate1"></child2>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MyHomework_Now from "@/components/Engineering/MyHomework_Now"; //我的作业-实时作业
import MyHomework_History from "@/components/Engineering/MyHomework_History"; //我的作业-历史作业
export default {
  name: "MyHomework",
  components: {
    child1: MyHomework_Now,
    child2: MyHomework_History
  },
  data: function() {
    return {
      activeName: "first",
      isChildUpdate1: true
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.isChildUpdate1 = true;
      } else if (tab.name == "second") {
        this.isChildUpdate1 = false;
      }
    }
  },
  mounted: function() {}
};
</script>

<style scoped>
#MyHomework {
  width: 100%;
  height: 100%;
}
</style>