子コンポーネントから親モデルを更新するVue

Question

寄付用フォームを持つ非常に小さなアプリがあります。このフォームは、ユーザーに情報を入力する手順を示します。私はフォームラッパーとフォームデータ（モデル）のすべてを保持するメインのVueインスタンスであるメインコンポーネントを持っています。すべての子コンポーネントは、寄付プロセス内のステップです。各子コンポーネントには、入力する入力フィールドがあり、それらのフィールドは親モデルを更新し、フォームを送信すると親モデルのすべてのフォームデータを保持します。ここでは部品が一緒に入れている方法です。donation-formコンポーネント内

<donation-form></donation-form> // Main/Parent component 

：今

<template> 
    <form action="/" id="give"> 
     <div id="inner-form-wrapper" :class="sliderClass"> 
      <step1></step1> 
      <step2></step2> 
      <step3></step3> 
     </div> 
     <nav-buttons></nav-buttons> 
    </form> 
</template> 

、私はそれぞれの子コンポーネントで入力からデータを設定していますし、私はwatch方法を持っていますそれは、更新するフィールドのために見ていると、私はこれを行うことによって、$rootにそれらをプッシュしています...

watch: { 
    amount() { 
     this.$root.donation.amount = this.amount; 
    } 
} 

問題は私の踏み台の一つに多くのフィールドがあり、私は繰り返しコードを書いているようです。また、これはこれを行う最善の方法ではないと確信しています。

propというデータを子コンポーネントに渡そうとしましたが、子コンポーネントの子コンポーネントを変更できないようです。

子コンポーネントのすべての値にウォッチを追加する以外に、ルートインスタンスや親インスタンスを更新するにはどうすればよいでしょうか？ここstep2 vue file 私donation-form.vueファイルです - -

より多くの例 は、ここに私のstep2.vueファイルですdonation-form vue file

Answer 1

あなたが戻ってデータを送信するためにcustom eventsを使用することができます。カスタムイベントで動作するように

、あなたのデータは、親コンポーネントであること、および小道具として子どもたちに伝承する必要があります

<step1 :someValue="value" /> 

と今は子供から更新されたデータを受信したい、そうにイベントを追加それ：

<step1 :someValue="value" @update="onStep1Update" /> 

あなたの子コンポーネントがイベントを発すると、引数としてデータを渡します：

this.$emit('update', newData) 

親コンポーネント：ちょうど
http://codepen.io/CodinCat/pen/QdKKBa?editors=1010

---

そして、すべてのステップ1、ステップ2とSTEP3は、フィールドとデータのトンが含まれている場合は、次のことができます。

methods: { 
    onStep1Update (newData) { 
    this.value = newData 
    } 
} 

ここでは、カスタムイベントを持つ単純な例でありますこれらのデータを子コンポーネントにカプセル化します（親コンポーネントがこれらの行データを気にしない場合）。

ので、それぞれの子供が<input />

<input v-model="data1" /> 
<input v-model="data2" /> 

しかし、同じで、独自のデータバインドを持って、あなたが戻ってイベントを経由して結果データを送信します。あなたのケースでは

const result = this.data1 * 10 + this.data2 * 5 
this.$emit('update', result) 

（アプリケーションがますます複雑になると、再び、vuexがソリューションとなります

Answer 2

次のようにV字モデルを使用することができます。

<form action="/" id="give"> 
    <div id="inner-form-wrapper" :class="sliderClass"> 
     <step1 v-model="step1Var"></step1> 
     <step2 v-model="step2Var"></step2> 
     <step3 v-model="step3Var"></step3> 
    </div> 
    <nav-buttons></nav-buttons> 
</form> 

v-modelですユーザ入力イベントに関するデータを更新するための本質的に構文砂糖。

<input v-model="something"> 

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

あなたが小道具を渡すことができます：子コンポーネントでvalueを、そしてstep1Var変数を変更します入力フィールドコール、以下の変更に210がためだけの構文糖です。

this.$emit('input', opt) 

あなたは変数がVモデルthouugh渡され、このようなコンポーネントの実装を見ることができ、このanswerを見てすることができます。

Answer 3

個人的には、すべての子にメソッドを書き込むのではなく、フォームを操作するときに親を更新するための汎用関数を持つことを好みます。説明するために - 凝縮ビット - 親でこのように：

<template lang="pug"> 
    child-component(:field="form.name" fieldname="name" @update="sync") 
</template> 
<script> 
export default { 
    methods: { 
    sync: function(args) { 
     this.form[args.field] = args.value 
    } 
    } 
} 
</script> 

と子コンポーネントで：

<template lang="pug"> 
    input(@input="refresh($event.target.value)") 
</template> 
<script> 
export default { 
    props: ['field', 'fieldname'], 
    methods: { 
    refresh: function(value) { 
     this.$emit('update', {'value': value, 'field': this.fieldname}); 
    } 
    } 
} 
</script>