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

Question

Не очень опытен с Vue, и я изо всех сил пытаюсь исправить проблему с существующим компонентом, созданным предыдущим разработчиком.

На родительской странице компонент stepper объявлен следующим образом, с они являются именами подкомпонентов, составляющих отдельные шаги:

@Component({
    name: 'switch-stepper',
    components: {
        Stepper,
        StepIndicator,
        FirstStep,
        SecondStep,
        ThirdStep
    }
})

В ThirdStep есть свойство, которое необходимо изменить, либо на родительской странице, либо в FirstStep. Рассматриваемое свойство - publi c и объявлено так:

@Prop({ default: true })
public myBooleanProperty: boolean;

Однако внутри родительской страницы, если я попробую это:

ThirdStep.myBooleanProperty

Оно не распознается intellisense и не определено. Я также пробовал создать метод publi c для ThirdStep, который я могу вызвать для использования ForceUpdate, но методы publi c также кажутся недоступными.

Я также попытался установить publi c через функцию на родительской странице при создании шага:

<third-step :page="page"
            :step="steps[4]"
            :myBooleanProperty="setMyBooleanProperty()"
            v-show="currentStep === steps[4]">
</third-step>

Но, насколько я могу судить, это вызывается только один раз при создании шага и больше никогда к нему не обращаются.

Что я могу сделать, чтобы установить свойство этого дочернего шага через другие компоненты в шаговом двигателе?

Answer 1

В ThirdStep есть свойство, которое необходимо изменить, либо на родительской странице, либо в FirstStep. Рассматриваемое свойство - publi c и объявлено следующим образом:

Если свойство необходимо изменить, его следует изменить в компоненте, который возвращает свойство в свойстве данных. . Под этим я подразумеваю компонент, имеющий

data() {
  return {
    myBooleanProperty: false // or true. This is the local data that will be initialised and passed as props to the ThirdStep component
  }
} 

Если это на родительской странице, измените ThirdStep.myBooleanProperty на this.myBooleanProperty = *enter value*. Изменение значения myBooleanProperty может быть выполнено в методе, наблюдателе, вычисляемом свойстве и т.д. c. Причина, по которой ThirdStep.myBooleanProperty не работает в родительском компоненте, заключается в том, что каждый компонент vue является экземпляром Vue, а ThirdStep не может иметь доступа к свойству экземпляра в родительском компоненте.

ParentComponent. vue

@Component({
    name: 'switch-stepper',
    components: {
        Stepper,
        StepIndicator,
        FirstStep,
        SecondStep,
        ThirdStep
    }
})

<third-step>
  ...
  :myBooleanProperty="myBooleanProperty" // my boolean property is passed as props from the parent component, I assume
  ....>
</third-step>

Когда myBooleanProperty изменяется там, где он инициализирован (родительский компонент, я полагаю), это приведет к тому, что значение свойства myBooleanProperty, переданное в компонент ThirdStep, необходимо изменить, и произойдет повторный рендеринг частей компонента ThirdStep, которые используют myBooleanProperty реквизиты.