子コンポーネントのイベントの値を親コンポーネントへ送る方法

イベントと値を送出する


イベントを特定の値付きで送出すると便利なことがあります。例えば、<blog-post> コンポーネントにテキストをどれだけ拡大するかを責務とさせたいかもしれません。そのような場合、$emit の2番目のパラメータを使ってこの値を提供することができます:

 

<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>


コンポーネントでイベントをリッスンすると、送出されたイベントの値に $event でアクセスできます:

 

<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
または、イベントハンドラがメソッドの場合:

<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>


値は、そのメソッドの最初のパラメータとして渡されます:

 

methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}

 

参考文献

https://jp.vuejs.org/v2/guide/components.html#単一のルート要素