← Back to rules

vue/valid-define-emits 正しさ

An auto-fix is available for this rule.

何を検査するか

このルールは、defineEmits コンパイラマクロが有効かどうかをチェックします。

以下の状況で、defineEmits コンパイラマクロに対して警告を出力します：

• defineEmits がローカルに宣言された変数を参照している。
• defineEmits にリテラル型と引数の両方が指定されている。例：defineEmits<(e: 'foo')=>void>(['bar'])
• defineEmits が複数回呼び出されている。
• カスタムイベントが defineEmits と export default {} の両方で定義されている。
• カスタムイベントが defineEmits も export default {} も定義されていない。

なぜ問題か

defineEmits の誤用は、ランタイムエラー、不明確なコンポーネント契約、型安全の喪失につながる可能性があります。
Vue はコードを依然としてコンパイルできるかもしれませんが、発行されるイベントは静かに破損するか、誤った型として扱われる可能性があります。

例

このルールに対する不正なコードの例：

<script setup>
const def = { notify: null };
defineEmits(def);
</script>

<script setup lang="ts">
defineEmits<(e: "notify") => void>({ submit: null });
</script>

<script setup>
defineEmits({ notify: null });
defineEmits({ submit: null });
</script>

<script>
export default {
  emits: ["notify"],
};
</script>
<script setup>
defineEmits({ submit: null });
</script>

このルールに対する正しいコードの例：

<script setup>
defineEmits({ notify: null });
</script>

<script setup>
defineEmits(["notify"]);
</script>

<script setup lang="ts">
defineEmits<(e: "notify") => void>();
</script>

<script>
export default {
  emits: ["notify"],
};
</script>
<script setup>
defineEmits();
</script>

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます：

設定 (.oxlintrc.json)

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-define-emits": "error"
  }
}

CLI

oxlint --deny vue/valid-define-emits --vue-plugin

参照

• ルールのソース