子から親にデータを渡す➁
子から親へはハンドラを介して$emit()で渡す
- 400円以上の商品なら「値下げする」ボタンをクリックするたび50円ずつ値下げする。
- 400円までしか値下げしない。
実際の描画
「子コンポーネント（my-product.js)」
Vue.component(‘my-product’,{
//(1) ボタンがクリックされたら子コンポーネントの「clickHandler」を呼び出す
template:`
<div>
<button v-on:click=”clickHandler”>値下げする</button>{{price}}円
</div>`,
props: [‘price’],
methods: {
// (2) ボタンのクリックイベントハンドラ
clickHandler: function(){
var discount = 0;
if(this.price -50 < 400){
// 例）現在の価格が430円の場合、値下げ幅は30円
discount = this.price – 400;
}else {
// 例）現在の価格が450円以上の場合、値下げ幅は50円
discount = 50;
}
//(3) 子コンポーネントに「child-click」イベントを発生させる
this.$emit(‘child-click’, discount);
}
}
});
親のテンプレート（main.html)
<div id=”app”>
//（４）子に「child-click」イベントが発生したら親の「priceDowm」を呼び出す
<my-product v-on:child-click=”priceDown” v-bind:price=”price”></my-product>
</div>
親のコンポーネント（main.js)
var app = new Vue({
el: ‘#app’,
data: {
price: 980
},
methods: {
// （５）子から呼び出されるメソッド
priceDown: function(discount){
// 値下げ幅が指定されていない場合は100円とする
if(discount == undefined) discount = 100 ;
//値下げする
this.price -= discount;
}
}
});
この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。
わからないことはプロフェッショナルから学ぶのが一番
オンラインで受講ができるスクールですので、全国どこからでも。
