проблема была решена, прочитайте вопрос, чтобы увидеть, как шаг за шагом решить проблемы
Я прочитал о композиции API (https://vue-composition-api-rfc.netlify.com/#api -введение ), и попытался преобразовать мой существующий код, который основан на машинописи на Option api в vuejs, и мне не удалось заставить его работать, и я был немного озадачен тем, как действительно работает состав API.
мой рабочий код ниже:
<script lang="ts">
import Vue from "vue";
import {inputFields} from "@/mixins/inputField/inputField";
import VuePersianDatetimePicker from "vue-persian-datetime-picker"
import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";
export default Vue.extend({
name: "DateTimePicker",
props: ['instance', "value", "formSection", "isEnable"],
components: {
datePicker: VuePersianDatetimePicker
},
data() {
return {
inputField: new InputFieldHelper(this.value, this.instance, this.formSection, this.isEnable)
}
},
mounted() {
//@ts-ignore
this.instance.min = util_timestampz_now();
},
methods: {
updateValue() {
let new_data = this.inputField.updateValue();
new_data ? this.$emit("updateValue", new_data) : "";
},
updateDateTime(time: string) {
//@ts-ignore
this.inputField.inputValue = util_timestampz_formatter(this.inputField.inputValue);
//@ts-ignore
this.updateValue();
},
}
});
</script>
ниже приведена конвертированная версия в составе api, которая не работает должным образом:
<script lang="ts">
import Vue from "vue";
import {reactive, createComponent, onMounted} from "@vue/composition-api";
import VuePersianDatetimePicker from "vue-persian-datetime-picker"
import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";
import {FormGeneratorInputField} from "@/types";
export default createComponent({
name: "DateTimePicker",
props: {
instance,
value,
formSection,
isEnable,
},
components: {
datePicker: VuePersianDatetimePicker
},
setup(props, context) {
const inputField = reactive(new InputFieldHelper(props.value, props.instance, props.formSection, props.isEnable));
onMounted(() => {
props.instance.min = util_timestampz_now();
});
const updateValue = () => {
let new_data = inputField.updateValue();
new_data ? context.$emit("updateValue", new_data) : "";
};
const updateDateTime = (time: string) => {
inputField.inputValue = util_timestampz_formatter(inputField.inputValue);
updateValue();
};
return {
inputField, updateValue, updateDateTime
}
}
});
</script>
какая веб-буря показывает 3 ошибки:
Есть ли способ исправить проблему?
.................
update1:
Я допустил ошибку при использовании реквизита (я думал, что я новичок vue, ему не нужен тип, и он автоматически принимает его в машинописи из родительского компонента). благодаря палео проблема исчезла и исправлена.
и всем, у кого есть подобные проблемы с получением ошибки типа для реквизита, как показано на рисунке ниже 
благодаря https://frontendsociety.com/using-a-typescript-interfaces-and-types-as-a-prop-type-in-vuejs-508ab3f83480, вы можете передать созданный интерфейс типа как функцию, как показано ниже: 
, но есть некоторые проблемы, которые необходимо исправить, как показано ниже:
1. когда я удалил реактив, кажется, что реактивность не работает должным образом, и в шаблоне, который говорит «неразрешенная переменная или пропущенная инструкция импорта» 
... .......................
update2 совместное использование реквизитов и использование функций композиции:
для После преобразования api на основе параметров в состав api мне показалось, что он лучше, чем новый, благодаря палео и Максимилиану Шруазмюллеру (я настоятельно рекомендую посмотреть это бесплатное видео: https://www.youtube.com/watch?v=V-xK3sbc7xI) и поиск в Google борется с этим https://vue-composition-api-rfc.netlify.com/api.html#template -refs я переписываю код так, как показано ниже:
<script lang="ts">
import {createComponent, onMounted} from "@vue/composition-api";
import VuePersianDatetimePicker from "vue-persian-datetime-picker"
import {util_timestampz_formatter, util_timestampz_now} from "@/utils/commonUtility";
import {
useInputFieldComposition,
inputFieldProps
} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/inputField.composition";
import {ComponentPropsOptions} from "@vue/composition-api/dist/component/componentProps";
export default createComponent({
name: "DateTimePicker",
props: inputFieldProps as ComponentPropsOptions,
components: {
datePicker: VuePersianDatetimePicker
},
setup(props, context) {
const {inputField, updateValue} = useInputFieldComposition(props, context);
onMounted(() => {
props.instance.min = util_timestampz_now();
});
const updateDateTime = (time: string) => {
inputField.inputValue = util_timestampz_formatter(inputField.inputValue);
updateValue();
};
return {
inputField, updateValue, updateDateTime
}
}
});
</script>
Как вы можете видеть, это было довольно аккуратно, потому что все, что будет совместно использоваться компонентами, находится в другом файле (названном: inputFiled.compositons), как показано ниже:
//inputField.composition.ts
import {PropType, reactive} from "@vue/composition-api";
import {FormGeneratorInputField} from "@/types";
import {InputFieldHelper} from "@/mixins/Helpers/FormGeneratorInputFieldHelper/InputField.Helper.mixin";
export const inputFieldProps = {
instance: {
type: Object as PropType<FormGeneratorInputField>,
required: true
},
value: {
type: Object,
required: true
},
formSection: {
type: String,
required: true
},
isEnable: {
type: Boolean,
required: true
},
};
export const useInputFieldComposition = (props: any, context: any) => {
let inputField = reactive(new InputFieldHelper(props.value, props.instance, props.formSection, props.isEnable));
const updateValue = (): any => {
let new_data = inputField.passInfoMixedValue();
new_data ? context.emit("updateValue", new_data) : "";
return new_data;
};
return {
props, inputField, updateValue
}
, как вы можете видите, с этой функцией мы можем использовать машинописный текст в полной мере.
и, наконец, я должен сказать вам, если вы следуете по пути и используете vue -composition api, ваш проект будет работать отлично, но веб-буря покажет вам некоторые предупреждения о коде конкретно в вашем шаблоне, например, неразрешенная переменная. Эта новая поддержка синтаксиса находится в стадии разработки, которую вы можете увидеть в этом выпуске https://youtrack.jetbrains.com/issue/WEB-41565, так что не беспокойтесь об этом и используйте ее.