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