<template>
  <div class="p-2">
    <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="对甲" name="1">
        <purchPage ref="purchPageRef1"></purchPage>
      </el-tab-pane>
      <el-tab-pane label="对乙" name="2">
        <purchPage ref="purchPageRef2"></purchPage>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="MonthPlan" lang="ts">
import { ref, watch, computed } from 'vue';
import purchPage from './comm/purchPage.vue';
// 引用子组件
const activeName = ref('1');
const purchPageRef1 = ref<InstanceType<typeof purchPage> | null>(null);
const purchPageRef2 = ref<InstanceType<typeof purchPage> | null>(null);
const handleClick = (val) => {
  if (val.props.name == '1') {
    purchPageRef1.value.getList(val.props.name); //子组件方法
  } else {
    purchPageRef2.value.getList(val.props.name); //子组件方法
  }
};
onMounted(() => {
  purchPageRef1.value?.getList('1'); //初始加载
});
</script>
