Как расширить скрипт API композиции vuejs?

У меня есть несколько компонентов (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, которые я сделал на этом шаге здесь, в этом вопросе)


person SeyyedKhandon    schedule 01.02.2020    source источник
comment
Я не могу расширить его должным образом… что не расширено должным образом?   -  person Paleo    schedule 01.02.2020
comment
Возможно, документация (раздел Logic Extraction and Reuse) может помочь.   -  person Paleo    schedule 01.02.2020
comment
спасибо @Paleo, я прочитал статью, но она немного отличается от того, что говорится в документе. если вы хотите сделать то же самое, что я сказал в вопросе, как бы вы это сделали?   -  person SeyyedKhandon    schedule 01.02.2020