Передача VueJS Prop в компонент класса TypeScript - PullRequest
Новая
       20

Передача VueJS Prop в компонент класса TypeScript

0 голосов
/ 06 февраля 2020

У меня есть простой класс компонентов машинописного текста, для которого требуется одна опора: 

export default class ColorsPallet extends Vue {
        @Prop({type: String, required: true}) readonly name!: string;
        private readonly view: StorageItem;
        private readonly stored: StorageItem;
        private readonly colors: ColorItems;

        constructor() {
            super();

            this.colors = db.colors[this.name]['items'];
            this.storedColor = new StorageItem(this.name + '-stored-color', localStorage, db.colors[this.name]['default']);
            this.viewColor = new StorageItem(this.name + '-view-color', sessionStorage, this.storedColor.get());
        }
}

Я хотел бы инициализировать этот класс в другом классе компонентов машинописного текста, чтобы получить указанную c переменную экземпляра: 

constructor() {
    super();

    const colors = new ColorsPallet();
    console.log(color.$data.viewColor.get());
}

Это дает мне очевидную ошибку: 

[Vue warn]: Missing required prop: "name"

(found in <Root>)

Так что я изменил инициализацию на: 

const colors = new ColorsPallet({props: ['name']})

Это все еще дает мне ошибку типа, так как я не совсем Передавая что-нибудь: 

[Vue warn]: Error in data(): "TypeError: Cannot read property 'items' of undefined"

(found in <Root>)

Не требуя опоры, этот код отлично работает для меня в разных случаях. Однако я не могу заставить это работать с передачей реквизита. Как я go об этом?

Редактировать:

Передача пропеллера, подобного этой, также не работает: 

const colors = new ColorsPallet({
  name: 'foo'
})

Результат к этой ошибке: 

TS2345: Argument of type '{ props: { name: string; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.   Types of property 'props' are incompatible.     Type '{ name: string; }' is not assignable to type 'string[] | RecordPropsDefinition<Record<string, any>> | undefined'.       Type '{ name: string; }' is not assignable to type 'undefined'.

Тип требуемого формата: 

/**
 * This type should be used when an array of strings is used for a component's `props` value.
 */
export type ThisTypedComponentOptionsWithArrayProps<V extends Vue, Data, Methods, Computed, PropNames extends string> =
  object &
  ComponentOptions<V, DataDef<Data, Record<PropNames, any>, V>, Methods, Computed, PropNames[], Record<PropNames, any>> &
  ThisType<CombinedVueInstance<V, Data, Methods, Computed, Readonly<Record<PropNames, any>>>>;

1 Ответ

1 голос
/ 07 февраля 2020

Одним из решений было бы установить значение по умолчанию: 

@Prop({type: String, required: true, default: 'foo'}) readonly name!: string;

Однако в приведенном выше примере я считаю, что вам понадобится: 

const colors = new ColorsPallet({
  propsData: {
    name: 'foo'
  }
})
...