จะขยายสคริปต์ vuejs Composition API ได้อย่างไร

ฉันมีส่วนประกอบหลายรายการ (textField, radioField,numberField ,...) ซึ่งใช้ส่วนตรรกะร่วมกัน เช่น:

//baseInputField.ts
import {createComponent} from "@vue/composition-api";
import {
  useInputFieldComposition,
  inputFieldProps
} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";

export default createComponent({
  props: inputFieldProps as ComponentPropsOptions,
  setup(props, context) {
    const {inputField, updateValue} = useInputFieldComposition(props, context);
    return {
      inputField, updateValue
    }
  }
});

ขณะนี้ฉันใช้ src ในแท็กสคริปต์สำหรับแต่ละองค์ประกอบซึ่งต้องการเพียงส่วนประกอบพื้นฐานเช่นด้านล่าง และใช้งานได้ (แต่ดูเหมือนว่าจะแชร์ออบเจ็กต์ไม่ใช่อันใหม่ ซึ่งทำให้ตัวเลือกที่เลือกของฉันเป็นเหมือนฟิลด์ข้อความ ซึ่งฉัน ไม่ต้องการมัน):

//numberField.vue
<script lang="ts" src="../scripts/inputFieldScriptTag.ts">
</script>

และสำหรับพวก radioField.vue ซึ่งมีโค้ดมากกว่า (นี่คือ "colorStateCheck" ดังที่คุณเห็นในโค้ดด้านล่าง) มากกว่า baseInputField.ts ฉันไม่สามารถขยายและใช้งานได้อย่างถูกต้อง

//radioField.vue
  import {createComponent} from "@vue/composition-api";
  import {
    useInputFieldComposition,
    inputFieldProps
  } from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
  import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";
  import {FormGeneratorInputFieldsLabelValuePairs} from "@/types";

  export default createComponent({
    name: "RadioField",
    props: inputFieldProps as ComponentPropsOptions,
    setup(props, context) {
      const {inputField, updateValue} = useInputFieldComposition(props, context);
      const colorStateCheck = (item: FormGeneratorInputFieldsLabelValuePairs) => {
        if (inputField.inputValue === item.value) {
          if (item.value === false) {
            return 'color:red';
          } else {
            return 'color:#84CE95';
          }
        }
        return ''
      };
      return {
        inputField, updateValue, colorStateCheck
      }

    }
  });

มีวิธีที่เหมาะสมในการทำเช่นนี้หรือไม่?

.....

(หากคุณต้องการไปเส้นทางนี้จากตัวเลือก api ไปยังองค์ประกอบ api และแก้ไขปัญหาของคุณ คุณสามารถทำตามนี้ถาม ปัญหาแปลก ๆ ในการแปลงตัวเลือก Vuejs Typescript เป็น Composition Api ซึ่งฉันได้ทำตามขั้นตอนนี้ที่นี่ในการถามนี้)