← 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

参考资料

• 规则源码