Как я могу в Vue определить локальное свойство данных, которое в качестве начального значения использует проп, в синтаксисе Typescript?

Question

При передаче реквизита дочернему компоненту в Vue документация гласит:

Кроме того, каждый раз, когда родительский компонент обновляется, все реквизиты в дочернем компонентебудет обновлен с последним значением.Это означает, что вы не должны пытаться изменить опору внутри дочернего компонента.Если вы это сделаете, Vue предупредит вас в консоли.

Реквизит используется для передачи начального значения;потом дочерний компонент хочет использовать его как локальное свойство данных.В этом случае лучше всего определить локальное свойство данных, которое в качестве начального значения использует проп:

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

Мы используем машинопись.Синтаксис для «определения локального свойства данных» выглядит следующим образом (, насколько я понимаю ):

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class App extends Vue {
  // Data property
  myDataProperty: string;
</script>

И синтаксис для подпорки:

@Component
export default class App extends Vue {
  // Makes a "exampleProperty" a component prop with the default value of 'Example'
  @Prop({default: 'Example'})
  exampleProperty: string
}

Итак, мы попытались следовать документации и получили:

parentComponent.vue

<template>
  <childComponent testProperty='test' />
</template>

childComponent.vue

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;
  testProperty = this.testProperty;
</script>

Как и ожидалось, произошла ошибка с `Duplicate identifier testProperty.

Итак, мы попробовали

...
      testProperty!: this.testProperty;
...

, что привело к

Duplicateидентификатор 'testProperty'.Свойство 'testProperty' не имеет инициализатора и не определено в конструкторе.Последующие объявления свойств должны иметь одинаковый тип.Свойство 'testProperty' должно иметь тип 'this', но здесь имеет тип 'any'.

Итак, я решил попробовать декоратор "vue-class-component".

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  data: function(){
    return {
      testProperty: this.testProperty,
    }
  }
})
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;
  testProperty = this.testProperty;
</script>

Это привело к ошибке Property 'testProperty' does not exist on type 'Vue'.

Я хотел бы, в обработчике, сделать this.testProperty = 'newProperty' в какой-то момент, но не могу, потому что это будет непосредственно изменятьопора

Как определить свойство локальных данных, которое использует проп в качестве начального значения в Typescript?

РЕДАКТИРОВАТЬ:

Если я не выполню ни одного извыше, и просто определите реквизит, не пытаясь определить локальное свойство данных, которое использует реквизит в качестве его начального значения, а затем выполните

this.testProperty = 'test'

inв обработчике эта ошибка отображается в консоли chrome:

vue.runtime.esm.js [Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент повторнооказывает.Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.Опора изменена: "testProperty"

Answer 1

Я обобщу свои комментарии в один последовательный ответ: проблема, с которой вы сталкиваетесь, заключается в том, что вы уже определили this.testProperty, объявив его опорой: выполнение testProperty = this.testProperty в лучшем случае является круговой ссылкой.Использование только декоратора @Prop сделает преобразование атрибута в шаблоне в переменную.

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class childComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (component) => {
        return [
          'notTest',
          'test',
        ].indexOf(component) > -1;
      },
    },
  )
  testProperty!: string;

  // Map prop to local data property
  testPropertyLocal = this.testProperty;
</script>

Кроме того, помните следующее предупреждение: Свойства VueJS должны быть регистр kebab вшаблоны и camelCase в JS .Итак, вам нужно обновить ссылку на ваш дочерний компонент:

<template>
  <childComponent test-property='test' />
</template>