結合VUE .sync修飾方法を使用して親コンポーネントサブアセンブリと

父と息子のコンポーネントを結合双方向データ

いくつかのケースでは、我々はのための小道具が必要な場合があり、「2ウェイバインディングを。」残念ながら、本当の問題は、サブアセンブリが親コンポーネントを変更することができるので、メンテナンスに結合双方向を持参し、親アセンブリとサブアセンブリ内になる明らかなソース・コードの変更はありません。

私たちがすることをお勧めする理由です update:my-prop-name 代わりに、イベントをトリガするパターン。例えば、中に含まれる title 仮説支柱の成分、我々は、以下の方法により発現意向に新しい値を割り当てることができます。
この$発する。（'更新：タイトル'、newTitleの）
そして、親コンポーネントは、そのイベントをリッスンし、ローカルデータの属性に応じて更新する必要がありますすることができます。例えば：
< テキスト文書V-バインド：タイトル= "doc.title" V-上：更新：タイトル= "doc.title = $イベント" > </ テキストドキュメント>
利便性のために、私たちは、このモードの省略形、すなわち提供 .sync 修飾子：
< テキスト文書V-バインド：title.sync = "doc.title"> </ テキストドキュメント>
私たちは、同時にオブジェクトを使用する場合も、あなたは、この使用することができ、複数の小道具を設定 .sync 修飾子をして v-bind と一緒に使用：
< テキスト文書V-bind.sync = "DOC"> </ テキストドキュメント>
これは、あろう doc （例えば、各属性オブジェクト titleの両方別パスとして小道具に）、その後それぞれが更新のために追加 v-on のリスナーを。

father.vue

<テンプレート> 
  の<div クラス = 「こんにちは」 > // 入力値をリアルタイムに変更WRD、リアルタイムで変化ボックスの内容 
    <種類のINPUT = 「テキスト」 Vモデル= 「WRD 」 > 
    <ボックス：word.sync = " WRD " > </ボックス> 
  </ div> 
</テンプレート> 
<スクリプト> 
インポートボックスから' ./box ' // 導入ボックスサブアセンブリ 
エクスポートデフォルト{ 
  名：' HelloWorldの' 、
  データ（）{ リターン{

    


   
    
      WRD：'' 
    } 
  }、
  コンポーネント：{ 
    ボックス
  }   
}
 </ SCRIPT> 

<スタイルスコープ> </スタイル>

box.vue

<テンプレート> 
  の<div クラス = " こんにちは" > 
    <divのクラス = " IPT " > 
      の<input type = " テキスト" Vモデル= " STR " > 
    </ div> // 単語是父元素传过来的 
    <H2> {{単語}} </ H2> 
  </ div> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  名：' ボックス' 、
  データ（）{ リターン{ 
      STR：'' 、
    }

    


     
  }、
  小道具：{ 
    ワード：'' 
  }、
  時計：{ 
    STR：関数（newValueに、OLDVALUE）{ 
      // ワード、及びオーバー値パス：イベント更新送信STRの値が変化するたびに
      、この $ EMIT（「更新：Wordを" 、newValueに）
    } 
  } 
}
 </ SCRIPT> 

<スタイルはスコープ> </スタイル>

データは、親コンポーネントのサブアセンブリを変更するために変更することができますが、サブアセンブリおよびコンテンツの変更が親コンポーネントには影響しません、双方向の結合効果は、新たな同期修飾子2.3.0によって達成することができます

結合VUE .sync修飾方法を使用して親コンポーネントサブアセンブリと

父と息子のコンポーネントを結合双方向データ

おすすめ