Vue 3 如何传递可选的布尔道具？

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 }

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

如果没有传递任何东西，我想将这些道具默认为 true，但是我无法区分传递 false 和完全省略道具。

Answer 1

如果在属性声明中没有指定 default，Vue 默认布尔属性为 false。 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，请使用 true 的 default 选项声明道具，使用 object-based syntax for the prop declaration，如此选项 [=52] 所示=] 示例：

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

选项 1：defineProps(props)

在 <script setup> 中，defineProps() 接受 prop 声明对象（如上所示）作为函数参数。由于 defineProps() 只接受 或者 函数参数 或 泛型类型参数，所有 props 都必须在函数参数中声明：

<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>()一起使用来指定特定道具的默认值：

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

demo 2