🙄

[ポエム]emitしないvue.js

2021/06/12に公開

親コンポーネントのメソッド叩きたいとき
emitで文字列指定のイベント発行するのがなんかしっくりこない。

emit('イベント名')

お気持ち
・イベント名の文字列管理するの大変
・propsで一方向性を担保してきたのに、なんかemitだけ子から親へ伝達してる感がある
・reactと頭をスイッチするの地味に大変

propsで親からイベント名文字列渡す実装を見て
かしこーい!と思ったけど、そこまでするならpropsでfunction渡すほうが明快じゃなかろうか。

// Parent.vue
<template>
  <Children
    :onClick="someFunc"
  >
</template>
<script>
setup () {
  return {
    someFunc: num => num * 2
  }
}
</script>
// Children.vue
export default {
  props: {
    onClick: {
      type: Function,
      required: true
    }
  }
}

うん。しっくりくる。
逆にemitのほうが刺さる状況もあるんだろうか。

Discussion