vue.js - 在运行时向 Vue 组件添加道具

Question

我尝试在 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>

精灵.vue

<Step> <MyForm/> </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.jsvuejs2vue-componentslots