フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装

//親コンポーネントの書き込み方法 <cld :numP="num" ></cld> 
 
//サブコンポーネントの定義とデータコンポーネント:{ 
 終了:{ 
  テンプレート:'#child', 
  小道具:{ 
   numP:数値 
  }, 
 } 
} 
 
//サブコンポーネントコンテンツ <template id="child"> 
 <div> 
  {{ numP }} 
 </div> 
</テンプレート> 

//方法 1: データを直接受信する props: ['numP'] 
 
//方法2: 型制限プロパティを追加する: [ 
 numP: 数値 
 ]  
 
//方法3: デフォルト値のプロパティを追加する: [ 
 数値P: { 
  タイプ:数値、 
  デフォルト:0 
  } 
]  
 
//方法4: propsの値を制限する必要があるか: [ 
 数値P: { 
  タイプ:数値、 
  デフォルト:0、 
  require:true // 必要な値を追加します。追加しない場合はエラーが報告されます} 
]  
 
//方法5: オブジェクトフォームプロパティの使用: { 
 数値P: { 
  タイプ:数値、 
  デフォルト:0、 
 } 
} 

// 親コンポーネントのコンテンツ <div> 
 子コンポーネントによって取得されるデータは {{getNum}} です 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
 
//親コンポーネントメソッド メソッド:{ 
 getNumC(データ){ 
  this.getNum = data //子コンポーネントからデータを受け取る} 
}, 
//サブコンポーネント定義コンポーネント:{ 
 終了:{ 
  テンプレート:'#child', 
  データ（）{ 
   戻る { 
    numC:1314 //サブコンポーネントデータ定義} 
  }, 
  マウントされた(){ 
    this.$emit('accept', this.numC) // カスタムイベントをトリガーする} 
  } 
}, 

<div id="アプリ"> 
 データ<br>{{num}} 
 <input type="text" v-model="num"><br> 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
//サブコンポーネントコンテンツ <template id="child"> 
 <div> 
  データ<br>{{childNum}} 
  <input type="text" v-model="childNum" /> 
 </div> 
</テンプレート> 
 
  <!-- 親子コンポーネントの通信 --> 
constアプリ = 新しいVue({ 
 el:'#app', 
  データ：{ 
   番号:'520', 
   }, 
  方法:{ 
   getNumC(データ){ 
    this.num = データ 
   } 
  }, 
  コンポーネント:{ 
   終了:{ 
    テンプレート:'#child', 
    小道具:{ 
     数値:文字列 
    }, 
   データ（）{ 
    戻る { 
     子番号:0, 
    } 
   }, 
  時計：{ 
   数値:関数(){ 
    this.childNum = this.numb 
   }, 
   子番号:関数(){ 
    this.$emit('accept',this.childNum) 
    } 
   }, 
  マウントされた(){ 
   this.childNum = this.numb 
   } 
  } 
 }  
}) 

<cld :numb.sync="num" ></cld> 
// は次のように展開されます: 
<cld :numb="bar" @update:numb="val => bar = val"/> 

this.$emit("update:numb", newValue ); 

// 親コンポーネント <Father :foo.sync="foo"></Father> 
 
//子コンポーネントのプロパティ: ['foo'], 
データ（） { 
  戻る { 
   新しいFoo: this.foo; 
   } 
}, 
方法:{ 
 追加:関数(){ 
  this.newMsg=10; 
  this.$emit('update:foo',this.newFoo); 
 } 
}