Bagaimana cara memperluas skrip API Komposisi vuejs?

Saya memiliki beberapa komponen (textField, radioField,numberField ,...) yang berbagi bagian logika, misalnya:

//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
    }
  }
});

Saat ini saya menggunakan tag skrip src untuk setiap komponen yang hanya membutuhkan komponen dasar seperti di bawah ini, dan berfungsi (tetapi sepertinya berbagi objek bukan yang baru, yang membuat Opsi pilihan saya menjadi seperti Bidang teks, yang saya tidak menginginkannya):

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

dan untuk yang seperti radioField.vue yang memiliki lebih banyak kode (di sini hanya "colorStateCheck" seperti yang Anda lihat pada kode di bawah) daripada baseInputField.ts, saya tidak dapat memperluasnya dengan benar dan menggunakannya.

//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
      }

    }
  });

apakah ada cara yang tepat untuk melakukan ini?

.....

(jika Anda ingin menggunakan jalur ini dari api opsi ke api komposisi dan memperbaiki masalah Anda, Anda dapat mengikuti permintaan ini masalah aneh dalam Konversi Opsi Skrip Vuejs ke Komposisi Api, yang saya lakukan pada langkah ini di sini dalam pertanyaan ini)


person SeyyedKhandon    schedule 01.02.2020    source sumber
comment
Saya tidak dapat memperpanjangnya dengan benar … apa yang tidak dapat diperpanjang dengan benar?   -  person Paleo    schedule 01.02.2020
comment
Mungkin dokumentasinya (bagian Ekstraksi dan Penggunaan Kembali Logika) dapat membantu.   -  person Paleo    schedule 01.02.2020
comment
terima kasih @Paleo, saya sudah membaca artikelnya, tetapi artikelnya sedikit berbeda dari yang disebutkan di dokumen. jika Anda ingin melakukan hal yang sama seperti yang saya katakan di pertanyaan, bagaimana Anda melakukannya?   -  person SeyyedKhandon    schedule 01.02.2020