双方向バインディングコンポーネントデータ大法のVUEの父と息子

公式ドキュメント

• すべての支柱は、一方向ダウンリンクサンズ支柱間の結合ように形成されています
• プロップ親はサブアセンブリを更新するために流下ではなく、その逆になります
• 2.3.0+新しい  .sync 修飾子
• するには  update:my-prop-name 、トリガ・イベントをモデル化し、最終的に結合上流の接合方法を達成
  栗について
  this.$emit('update:title', newTitle)

コードの実装

child.vue

<テンプレート>
  <div>
      <input type = " テキスト" Vモデル= " sonValue " >
      <DIV> {{fatherValue}} </ div>
  </ div>
</テンプレート>

<スクリプト>

輸出のデフォルト{
  小道具：{
    fatherValue：{
      必要：真
    }
  }、
  データ（）{
    リターン{
      sonValue：この.fatherValue
    }
  }、
  見る： {
    sonValue（newValueに、OLDVALUE）{
      この $（発する。' 更新：fatherValue ' 、newValueにします）
    }、
    fatherValue（newValueに）{
      この .sonValue = newValueに
    }
  }
}
</ SCRIPT>

father.vue

<テンプレート>
  <divのクラス = " こんにちは" >
    <！ - リアルタイムで入力リアルタイム値の値の変化、および変更子の内容 - >
    <input type = " テキスト" Vモデル= " 値" >
    <子：fatherValue.sync = " 値" > </子供>
  </ div>
</テンプレート>
<スクリプト> 
輸入子供から 「./Child 」  // 導入子サブアセンブリ 
エクスポートデフォルト{
  データ（）{
    リターン{
      値：「」
    }
  }、
  成分：{
    「子供」：チャイルド
  }  
}
</ SCRIPT>