dtScreen/src/components/ui/TechTabPane.vue

<template>
  <div class="tech-tab-pane" v-show="active">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TechTabPane',
  props: {
    label: { type: String, required: true }, // 头部显示的文字
    name: { type: [String, Number], required: true } // 唯一标识符
  },
  computed: {
    // 核心：动态判断自己是否被选中
    active() {
      // 通过 this.$parent 拿到 TechTabs 组件绑定的 v-model (即 value 属性)
      return this.$parent.value === this.name;
    }
  },
  created() {
    // 组件创建时，把自己注册到父组件的 panes 数组中去，让父组件能渲染出头部
    if (this.$parent && this.$parent.addPane) {
      this.$parent.addPane(this);
    }
  },
  beforeDestroy() {
    if (this.$parent && this.$parent.removePane) {
      this.$parent.removePane(this);
    }
  }
};
</script>

<style scoped>
.tech-tab-pane {
  width: 100%;
  height: 100%;
}
</style>