У меня есть несколько компонентов (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 композиции и исправить свои проблемы, вы можете выполнить этот запрос странные проблемы в Convert Vuejs Typescript Options to Composition Api, которые я сделал на этом шаге здесь, в этом вопросе)