実際の描画
「子コンポーネント（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(){
//(3) 子コンポーネントに「child-click」イベントを発生させる
this.$emit(‘child-click’);
}
}
});
親のテンプレート（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(){
this.price -= 100;
}
}
});
「子の値下げする」ボタンをクリックするたびに親のpriceが100ずつ減少します。priceはv-bindで子のカスタムタグにバインドしているので、クリックするたびに子のDOMが更新されて表示変わります。
難しいとは思いますが、いったん子のことは忘れて「親のテンプレート」と「親のコンポーネント」だけ見ると、通常のイベントハンドリングと何ら変わりません。
この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。
わからないことはプロフェッショナルから学ぶのが一番
オンラインで受講ができるスクールですので、全国どこからでも。
