13-Vueのカスタムコンポーネント

サブアセンブリは、親要素にデータを渡す必要があるとき、カスタムコンポーネントを使用する必要があります。

親コンポーネントは、カスタムイベントのサブコンポーネントがトリガ聞くためにカスタムラベルサブアセンブリ上のV-一度、直接使用することができます。

<DIV ID = "アプリ">

<P>合計:{{合計}} </ P>

<私の成分の@の増加=「handleGetTotal」

                           @ = "handleGetTotal"> </私の-成分を低減>

</ div>

<スクリプト>

Vue.component( "私のコンポーネント"、{

テンプレート: `の<div>

<ボタン@クリック= "handleIncrease"> + 1 </ボタン>

<ボタン@クリック= "handleReduce"> - 1 </ボタン>

</ DIV> `、

データ(){

{戻ります

カウンター:0

}

}、

方法:{

handleIncrease(){

this.counter ++;

これは。$発する( "増加"、this.counter)

}、

行為減少(){

this.counter--;

これは。$発する( "削減"、this.counter)

}

}

});

新しいビュー({

エル: "#アプリ"、

データ:{

カウンター:0

}、

方法:{

handleGetTotal(合計){

this.total =合計

}

}

})

</ SCRIPT>

個人的な理解:

<私の成分> 2つのボタンの構成要素のレンダリング、クリックイベントがトリガ機能handleIncrease、カウンター++関数は内部動作を達成し、名前チュアンの値の増加後に値を追加するながらボタンをクリックすると結合トリガー親、@増加し、それが終了ボタンの最初のクリックがhandleIncrease伝達関数値を実行した直後に親@増加=「handleGetTotal」を実行し、トータルとして着信this.counterを受信する機能と、handleGetTotal機能を実行しています親の合計に渡された値、this.total =合計、最後の呼び出しは、このpタグ値です。

おすすめ

転載: www.cnblogs.com/Romantic-Blood/p/11094540.html