コンポーネントとビューのルーティング間でフォームデータを渡す

Question

コンポーネント&ルーティングを使用して段階的なフォームを作成しようとしています。これを行うためのより良い方法や簡単な方法がある場合は、私がVue.jsを初めて使うので、お気軽にお勧めします。

私には3つのテンプレートがあります。

<template id="step-1"> 
    <h1>Welcome to Form</h1> 
</template> 

<template id="step-2"> 
    <label>Name:</label> 
    <input type="text" name="name" v-model="name" /> 

    <br /> 
    <label>Email:</label> 
    <input type="email" name="email" v-model="email" /> 
</template> 

<template id="step-3"> 
    <p>Review:</p> 

    <!-- Display Step 2 Form Values --> 
    {{ name }} 
    {{ email }} 

    <button>Submit</button> 
</template> 

がある私は何をしたい、＃ステップ-3に入力値を表示し、ボタンのクリックで、Ajaxの呼び出しを介してフォームを送信します。

ここからフィドルを表示することができます。すべての3つのコンポーネントが同じデータオブジェクトを使用するためにこれを行うにはhttps://jsfiddle.net/j7mwc9wk/

Answer 1

一つの方法です。このコードの目的のために、単純なjavascriptオブジェクトにすることができます。もう少し洗練されたアプローチは、公式のVueデータストアであるVuexを使用することです。 また、これら3つのコンポーネントに同じ親がある場合、名前と電子メールが親データメソッドのプロパティになり、したがってすべての子にアクセスできるようにすることができます。私はこれがどのようにVueルータで動作するのかわかりませんが、それはうまくいくはずです。