Vue3で[Vue warn]: Extraneous non-emits event listeners ...の警告が出たら

起きていること

Vue3でemitを使って子コンポーネントから親コンポーネントのメソッドを呼ぼうとした時に以下のエラーがコンソールで表示されてしまった。

[Vue warn]: Extraneous non-emits event listeners (remove) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

対処法

Vue3の公式ドキュメントにもあったが、emits オプションを追加すれば警告が消える。

 <template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
 </template>
 <script>
  export default {
    props: ['text'],
+   emits: ['accepted']
  }
 </script>

Vue3から、プロパティと同様に、コンポーネントが発行するイベントは emits オプションで定義できるようになりました。