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)