複数ステップモーダルまたは異なるvueコンポーネントを使用するVueJs

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を使用することができます。