データーの受け渡し（子コンポーネントから親コンポーネント）| Data transfer (from child to parent)

　　　　　

書式

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

　

実際の描画 | 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(){
//(3) 子コンポーネントに「child-click」イベントを発生させる

this.$emit('child-click');

}
}
});

親のテンプレート（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(){

this.price -= 100;

}
}
});

「子の値下げする」ボタンをクリックするたびに親のpriceが100ずつ減少します。priceはv-bindで子のカスタムタグにバインドしているので、クリックするたびに子のDOMが更新されて表示変わります。 難しいとは思いますが、いったん子のことは忘れて「親のテンプレート」と「親のコンポーネント」だけ見ると、通常のイベントハンドリングと何ら変わりません。 | It may be difficult, but once you forget about the child and just look at the "parent template" and "parent components", it's no different from normal event handling.

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

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

プライバシーポリシー