Добавление реквизита во время выполнения к компоненту Vue - PullRequest
Новая
       20

Добавление реквизита во время выполнения к компоненту Vue

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

Я пытаюсь создать высокодинамичный мастер как компонент в Vue.Он состоит из трех компонентов: самого компонента Wizard , компонента Step и одного компонента формы MyForm.Форма может быть в режиме редактирования или только для чтения, в зависимости от текущего шага мастера.

После некоторых проб и ошибок мне наконец-то удалось создать такой компонент, и он работает.Одна проблема, которую я изо всех сил пытался решить, - передать информацию, если форма находится в режиме редактирования или нет, из компонента Step в дочерний компонент формы.

MyForm.vue 

<template>
  <form>
    <div v-if="inEditMode"><i>Form is in edit mode</i></div>
    <div v-else><i>Form is in read only mode</i></div>
  </form>
</template>

<script>
import Vue from "vue";
export default Vue.extend({
  props: ["inEditMode"]
  // mixins: [wizardStepMixin],
});
</script>

Wizard.vue

<Step> <MyForm/> </Step>

Step.vue

<slot :isInEditMode="true"/>

Передача / установка опоры в слот, как я делал выше, не работала (опора не изменилась).

Мое решение установить опору isInEdit в MyForm - это вызвать функцию prepareSlot в компоненте Step перед монтированием и обновлением Step. 

prepareSlot() {
        this.$slots.default.forEach(element => {
            if (!element.data) return

            element.componentOptions.propsData = {
                ...element.componentOptions.propsData,
                inEditMode: this.stepNr === this.currentStep
            }
        })
    }

Вы можетенайти полный проект на https://codesandbox.io/embed/mzr10wzk0j.

Есть ли лучший способ архивировать это?Так ли это безопасно?

...