子要素から親要素へのデータの受け渡し
公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。
子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。
$emit
使うのは$emit
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="components-demo"> <h1>{{ number }}</h1> <sample-button :totalNumber="number" v-on:my-click="number += $event" > </sample-button> </div> Vue.component('sample-button', { props: { totalNumber: { Type: Number, } }, methods: { increment(){ this.$emit("my-click", this.totalNumber += 1); } }, template: '<button v-on:click="increment()">+1</button>' }) new Vue({ el: '#components-demo', data(){ return { number: 10 }; }, }) |
Leave a Reply