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

Question

我想创建一个加载形式与客户使用VueJs的视觉进步。

这是一个多步骤的形式，将使用状态管理来“记住”用户的页面位置。

你会选择什么样的选择？为什么？

选项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组件和使用VUE路由器具有“下一步”按钮导致不同VUE组件。

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

在此先感谢！

Answer 1

您可以创建一个新组件并包装所有步骤组件。所有的状态数据都将留在这个新组件，并通过道具发送到所有踏板组件：

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

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