🙋♂️
【Vue3】イベントトリガーはemitsオプションで宣言が必要
はじめに
Vue3に移行中にvue/require-explicit-emitsで怒られた備忘録です。
vue/require-explicit-emitsとは？
このルールは、emitsオプションで宣言されていないイベントトリガーを報告します。
（なんやそれ...）
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>
参考
Discussion