VueJs 使用多步模式或不同的 vue 组件

Question

我想为使用 VueJs 的客户创建一个入职表单，其中包含可视化进度。

这是一个多步骤表单，将使用状态管理 "remember" 用户页面位置。

您会选择哪个选项，为什么？

选项 1： 使用多步模式，进入下一步意味着显示同一页面的不同 html 部分。

<!--  The Modal -->

<section>
    <h3>Welcome!</h3>
    <p>You are about to experience data collection bliss.</p>
    <button @click="goToStep(2)">Next</button>
</section>

<section>
    <h3>Step 2: Yay!</h3>
    <button @click="goToStep(3)">Next</button>
</section>

选项 2： 使用不同的 vue 组件并使用 "next step" 按钮会导致使用 vue-router 的不同 vue 组件。

+Components
--- stepOne.vue
--- stepTwo.vue

提前致谢！

Answer 1

您可以创建一个新组件并包装所有步骤组件。所有状态数据将保留在这个新组件中，并通过 props 发送到所有步骤组件：

<wrapper-component>
  <step-one v-if="step === 1" />
  <step-two v-else-if="step === 2" />
</wrapper-component>

或者更好的是，您可以使用 Vuex 来管理所有共享状态。

VueJs 使用多步模式或不同的 vue 组件

VueJs using multi step modal or different vue components

structure

vue.js

vue-component

vuejs2