子から親にデータを渡す | Pass data from child to parent

子から親へはハンドラを介して$emit()で渡す | Pass from child to parent via $ emit () via handler

書式

書式：＄emit('発生させたいイベント名'、イベントハンドラに渡すデーター）
| Format: $ emit ('event name you want to generate', data to be passed to the event handler) ；

　　　　

• 400円以上の商品なら「値下げする」ボタンをクリックするたび50円ずつ値下げする。| For products over 400 yen, the price will be reduced by 50 yen each time you click the "Reduce price" button.
• 400円までしか値下げしない。| The price will only be reduced to 400 yen.

実際の描画 | Actual drawing

「子コンポーネント（my-product.js) | Child component （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) | Parent template （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;

}
}
});

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー