スロットに双方向バインディングを渡す

Question

私はVueの方が新しく、個々の子ノードにformDataを渡す際に特に問題があります。理想的には、各子ノードは親フォームオブジェクトを更新するだけで、フォームデータを後で全体として送信することができます。

私が説明するためのセットアップJSFiddleをしました：https://jsfiddle.net/3nm1mrLo/

私の現在の考え方は、私がすべきことであるv-bind:field="formData.name"が、それはエラーがスローされます。あたかもformDataがスロットベースのHTMLに存在しないようです。

すべてのポインタが喜んで受信されます。ありがとう！

Answer 1

正しく言えば、v-bind:field="formData.name"または:field="formData.name"を使用する必要があります。

メインアプリテンプレートをhtmlに直接定義し、<example-form>と<example-input>を含む「コンテンツ配信」を使用しているため、動作しません。

ドキュメントで定義されているように、このコンテンツ配布（またはAngular 1.xに精通している場合は「移譲」）はうまく動作しますが、スコープはメインアプリケーション（ルートインスタンスです。それ）。

文献：https://vuejs.org/v2/guide/components.html#Compilation-Scope

引用：

コンポーネントスコープの親指の簡単なルールがある：

親テンプレートのすべてが親スコープにコンパイルされます。子テンプレートのすべてが子スコープでコンパイルされます。

あなたが興味があれば、次のようにあなたのメインアプリ（ルート・インスタンス）を変更してみてください：

new Vue({ 
    el: '*[my-app]', 
    data: function() { 
     return { 
      formData: { name: 'abc', location: 'xyz'} 
     }; 
    } 
}); 

今、あなたはFORMDATAはもうundefinedではないことがわかります。

しかし、より適切な方法は、次のようにexample-formコンポーネントのテンプレートの一部として<example-input>を含めることです。

Vue.component('example-form', { 
    template: ` 
     <div class="my-example-form"> 
      <form><pre>{{formData}}</pre><slot></slot></form> 
      <example-input :field="formData.name"></example-input> 
      <example-input :field="formData.location"></example-input> 
     </div> 
    `, 
    data: function() { 
     return { 
      formData: { name: '', location: ''} 
     }; 
    } 
}); 

あなたが期待するよう今では右formDataにバインドします。

propsは片方向バインディングであるため、これはまだ機能しません。子コンポーネント（example-input）が値を取得しますが、親コンポーネントに戻ってデータの変更を渡しません（example-form）

子が戻って親にデータを渡すためには、正しい方法では、この問題で説明$emitを使用することです：Updating parent data via child component?

<example-input>コンポーネントをフォーム要素として機能させたい場合は、期待どおりに機能する関連する回答があります。https://stackoverflow.com/a/40337942/654825 - jsFiddleも動作しています。