typescript - Vue 3 如何传递一个可选的 bool Prop ？

Question

我正在使用 Vue 3 和 TS 4.4 构建一个应用程序，并与 Vite 2 捆绑在一起。我有一个包含以下内容的 LoginPage.vue 文件:

<script lang="ts" setup>
const props = defineProps<{
  message?: string;
  redirectOnSubmit?: boolean;
  showRegisterLink?: boolean;
}>();

console.log({ ...props });
</script>

<template>
  ... login form and whatnot
</template>

这个组件正在传递给 vue-router

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { name: RouteName.LOGIN, path: "/login", component: LoginPage },
    { name: RouteName.REGISTER, path: "/register", component: RegisterPage },
  ],
});

我遇到的问题是当登录页面 setup 脚本运行时，它会记录以下内容:

{ redirectOnSubmit: false, showRegisterLink: false, message: undefined }

为什么我的可选 bool 属性被强制为 false 而不是 undefined？有什么办法可以关闭它吗？如果我将 message 切换为 message?: boolean，它也会切换为 false。

如果没有传递任何内容，我想将这些 Prop 默认为 true，但我无法区分传递 false 和省略 Prop 完全。

Answer 1

Vue 默认 bool 属性为 false如果没有 default在 Prop 声明中指定。 Vue的作者explains the reasoning :

The boolean casting follows the same rule of a boolean attribute: presence of any value are casted to true, absence means false.

默认属性为 true ，用 default 声明 Prop true 的选项, 使用 object-based syntax for the prop declaration ，如此选项 API 示例所示:

<script>
export default {
  props: {
    myOptionalBool: {
      type: Boolean,
      default: true, 👈
    }
  }
}
</script>

选项 1:defineProps(props)

在 <script setup> , defineProps()接受 prop 声明对象(如上所示)作为函数参数。从 defineProps()只接受任一函数参数或泛型类型参数，所有的 Prop 都必须在函数参数中声明:

<script lang="ts" setup>
const props = defineProps({
  message: String,
  showRegisterLink: {
    type: Boolean,
    default: true,
  },
  redirectOnSubmit: {
    type: Boolean,
    default: true,
  },
})
</script>

demo 1

选项 2:withDefaults()和 defineProps<T>()

withDefaults() 宏可以与 defineProps<T>() 一起使用指定特定 Prop 的默认值:

<script lang="ts" setup>
interface Props {
  message?: string
  redirectOnSubmit?: boolean
  showRegisterLink?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  redirectOnSubmit: true,
  showRegisterLink: true,
})
</script>

demo 2