Question

我尝试在Vue中创建一个高度动态的向导作为组件。它包含三个组件：向导组件本身， Step 组件和单个表单“ MyForm”组件。表单可以处于编辑模式或只读模式，具体取决于向导的当前步骤。

经过反复尝试，我终于设法创建了一个这样的组件，它可以正常工作。我努力解决的一个问题是，如果表单处于编辑模式，则是否将信息从“步骤”组件传递到子表单组件。

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"/>

像上面一样将道具传递/设置到插槽上是行不通的（道具没有变化）。

我在MyForm上设置prop isInEdit 的解决方案是在安装和更新Step之前在Step组件中调用函数 prepareSlot 。

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上找到完整的项目。

是否有更好的存档方法？这样安全吗？

在运行时向Vue组件添加道具

0 个答案: