vue3+ts 自定义组件

<template>
  <el-radio-group v-model="selectValue">
    <el-radio-button v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id" />
  </el-radio-group>
</template>

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

const props = defineProps({
  payMethod: [String, Number]
});
const selectOptions=ref([]);
const emits = defineEmits(['update:payMethod']);
const selectValue = computed({
    get: () => { return props.payMethod },
    set: newVal => emits('update:payMethod', newVal)
});

const getOptions =()=>{
  api.then(res=>{ // 接口获取参数
   selectOptions.value=[...res.data];
  });
};
onBeforeMount(() => {
   getOptions();
});
</script>

上面代码是一个简单的单选按钮组的封装组件，使用时使用以下代码：

 <PayMethodSelect v-model:payMethod="payMethod" />