Vモデルのカスタムコンポーネントとの原則のVモデルVUE、

VモデルVUEは、双方向バインディングを達成することができますが、それはどのような原則ですか？それを表示するには、下

文書の公式な解釈によると、Vモデルは、実際にシンタックスシュガーである、それは要素またはコンポーネントに自動的に上記されて解析します。値=「」と入力@ =「」、そうのような

1  // 標準文言
2 <INPUT = Vモデル"名前">
 3。 
4。 // 同等
5。 <INPUT： "$ event.target.value名="値= "名前" INPUT @ =>
 6。 
7。 // 上記のアセンブリ
。8 <DIV：値= "名前" INPUT @ = "イベント名$ ="> </ div>

1.入力ボックス入力を入力すると、自動的に名前の値がバインディング更新され、入力イベントをトリガします。

JavaScriptのことで名前の変更の値は、入力値の値を更新2

上記の原理によると、VUEは、Vモデルを通じて結合双方向のデータを達成するために

 

Vモデルのため読む前の説明は、一定の理解を持っています。ここでは、Vモデル、それ以上そのコンポーネントを実現するために来ます

要件：すべての自動値打ち価格プラス100をバインドするためにクリックし、ボタンをクリックするだけを実装します。AddPrice.vueと呼ばれるコンポーネント

// AddPrice.vue 
// プロップ受け入れるようにパラメータの値が 
<テンプレート> 
  の<div @click = "$ EMIT（ 'INPUT'、値+ 100）">プラスお金の<div>をクリックします
</テンプレート> 

<スクリプト> 
  エクスポートデフォルト{ 
    小道具：[ 'の値' ] 
  }
    
 </ SCRIPT> // コール親要素 
の<add-価格をVモデルは= "価格"> </アドオン価格>

、受信したパラメータ値を受け入れるイベントトリガーアセンブリをクリックして、$を使用するために小道具を使用するコンポーネントは、双方向バインディングカスタムを達成するために親コンポーネントに入力イベントを呼び出す発します