🙋‍♂️

【Vue3】イベントトリガーはemitsオプションで宣言が必要

2023/06/01に公開

はじめに

Vue3に移行中にvue/require-explicit-emitsで怒られた備忘録です。

vue/require-explicit-emitsとは?

このルールは、emitsオプションで宣言されていないイベントトリガーを報告します。
(なんやそれ...)

https://v3-migration.vuejs.org/breaking-changes/emits-option.html

Vue3ではpropsと同様にemitsオプションが提供されるようになったみたいです。
したがって、このvue/require-explicit-emitsはイベントトリガーを記述していながら、emitsオプションで宣言がされていないと警告してくれるルールです。

Vue3のコード

Vue3では以下のようにする必要があります。

<template>
  <div>
    <!-- GOOD😄 -->
    <button v-on:click="$emit('good')">GOOD</button>
    <!-- BAD😭 -->
    <button v-on:click="$emit('bad')">BAD</button>
  </div>
</template>
<script>
  export default {
    <!-- 以下の宣言が必要になった -->
    emits: ['good']
  }
</script>

ちなみに<script setup>を使ってる場合は、こんな感じで書けます。

<script setup>
const emit = defineEmits(['good'])
</script>

参考

https://eslint.vuejs.org/rules/require-explicit-emits.html
https://v3-migration.vuejs.org/breaking-changes/emits-option.html
https://ja.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

Discussion