1

我有多个共享逻辑部分的组件（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 中按照这个询问奇怪的问题，我在这个问题中做了这一步）

4

0 回答 0