Skip to content
← Back to rules

vue/define-props-destructuring 风格

它的作用

此规则强制执行 Vue 3 组合式 API 选项中处理 props 的一致风格,允许你选择是否要求解构或禁止解构。

为什么这是个问题?

默认情况下,该规则要求在使用 defineProps 时必须使用解构语法,而不是将 props 存储在变量中,并且会警告不要将 withDefaults 与解构结合使用。

示例

以下为 错误 用法示例:

vue
<script setup lang="ts">
const props = defineProps(["foo"]);
const propsWithDefaults = withDefaults(defineProps(["foo"]), { foo: "default" });
const { baz } = withDefaults(defineProps(["baz"]), { baz: "default" });
const props = defineProps<{ foo?: string }>();
const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
</script>

以下为 正确 用法示例:

vue
<script setup lang="ts">
const { foo } = defineProps(["foo"]);
const { bar = "default" } = defineProps(["bar"]);
const { foo } = defineProps<{ foo?: string }>();
const { bar = "default" } = defineProps<{ bar?: string }>();
</script>

配置

此规则接受一个配置对象,包含以下属性:

destructure

type: "always" | "never"

default: "always"

要求或禁止解构。

"always"

在使用 defineProps 时要求进行解构,并警告不要将 withDefaults 与解构结合使用。

"never"

要求使用变量存储 props 并禁止解构。

如何使用

要通过配置文件或 CLI 启用 此规则,可以使用:

json
{
  "plugins": ["vue"],
  "rules": {
    "vue/define-props-destructuring": "error"
  }
}
bash
oxlint --deny vue/define-props-destructuring --vue-plugin

参考资料