vue3+ts 级联自定义组件

<template>
  <div>
    <el-form-item label="发票材质">
      <el-radio-group v-model="material">
        <el-radio-button v-for="item in materialOptions" :label="item.name" :value="item.id" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="发票类型">
      <el-radio-group v-model="type">
        <el-radio-button v-for="item in typeOptions" :label="item.name" :value="item.id" />
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
import { getCostTypes, createCostConfig } from "@/api/system/cost/costConfig";

const props = defineProps({
  invoiceMaterial: [String, Number],
  invoiceType: [String, Number]
});


const emits = defineEmits(['update:invoiceMaterial','update:invoiceType']);

const material = computed({
    get: () => { return props.invoiceMaterial},
    set: newVal => emits('update:invoiceMaterial', newVal)
});

const type = computed({
    get: () => { return props.invoiceType },
    set: newVal => emits('update:invoiceType', newVal)
});

const checkShow = (type)=>{
    let selM = selectOptions.value.filter(x=>x.key == material.value);
    console.log('selM',selM,material.value)
    if(selM && selM.length==1){
        let types=selM[0].value;
        if(types.includes(type)){
            return true;
        }else{
            return false;
        }
    }else{
        return false;
    }
};

const getMaterialOptions= () => {
    // 接口获取options
};

const getTypeOptions= (material) => {
    // 接口获取options
};

onBeforeMount(() => {
   getMaterialOptions();
});
</script>

父组件使用的代码：

<InvoiceMaterialAndType v-model:invoiceMaterial="invoiceMaterial" v-model:invoiceType="invoiceType" />