Question

我想为使用VueJs的客户创建一个入门表单，带来视觉进度。

这是一个多步骤表单，它将使用状态管理来记住＆＃34;用户页面位置。

你会选择什么选项？为什么？

选项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组件并进行＆＃34;下一步＆＃34;按钮使用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组件

1 个答案: