Vue での Events と callback props

概要

vue では child-parent のやりとりの方法として2つのやり方がある。

React と同じ callback props

e.g.

child-component

<template>
  <button @click="onClick"/>
</template>
<script>
export default {
  props: {
    onClick: {
      type: Function,
      required: true,
    }
  }
}
</script>

parent-component

<child-component :onClick="handleClick" />

pros

Reactと共通の書き方なので、React使いは書きやすい。
Callbackが存在しない場合エラーになるため、わかりやすい。

cons

コード量は少々増える。

child-component からの event 呼び出し

e.g.

child-component

<template>
  <button @click="$emit('onClick')"/>
</template>
<script>
export default {}

parent-component

<child-component @onClick="handleClick" />

pros

コード量は減る。
Vueライクな書き方。

cons

親コンポーネントにonClickイベントが渡されていない場合、エラーも出ないためtypoなどに気づきにくい。

公式では

Reactではこういう問題があった場合、通常はどちらかを推奨したりするが、vueでは特に何も言っていないためどちらでも良い感じのスタンス。
速度的にも大した差は出ないと思われる。

個人的にはReactの方がエラーが出るので、気づきやすくて良いかなと思ってる。

FYI

https://forum.vuejs.org/t/events-vs-callback-props/11451