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

false如果defaultprop 声明中没有指定，Vue 默认使用 Boolean props 。Vue 的作者解释了原因：

布尔转换遵循与布尔属性相同的规则：任何值的存在都被转换为 true，不存在则意味着 false。

要将 props 默认为true，请使用prop 声明的基于对象的语法，使用default选项声明 prop ，如以下选项 API 示例所示：true

<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>

演示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>

演示2