首页 文章

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

提问于
浏览
0

我想为使用VueJs的客户创建一个具有视觉进度的 onboarding form .

这是一个多步骤表单,它将使用状态管理来“记住”用户页面位置 .

你会选择什么选择?为什么?

Option 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>

Option 2: 使用不同的vue组件并使用"next step"按钮使用vue-router导致不同的vue组件 .

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

提前致谢!

1 回答

  • 1

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

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

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

相关问题