Vue3如何正确定义可选boolean类型prop，避免被强制转为false？

原因 #

这是Vue 3针对布尔类型Prop的默认解析规则，是刻意设计的行为，用来对齐原生HTML布尔属性的使用习惯：

• 当Prop的类型被显式/隐式推断为Boolean时，只要父组件没有显式传递该Prop、同时没有设置自定义默认值，Vue会自动将该Prop的值设为false
• 你使用基于TypeScript类型的defineProps声明时，redirectOnSubmit?: boolean、showRegisterLink?: boolean会被Vue自动推断为布尔类型Prop，因此触发了上述规则；而message?: string是字符串类型，没有对应默认规则，未传值时就保持undefined，和你观察到的输出完全一致。

解决方案 #

方案1：直接设置默认值为true（适配你的核心需求） #

如果你不需要区分「未传Prop」和「主动传false」，只是希望未传时默认值是true，直接用withDefaults包裹defineProps指定默认值即可：

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  message?: string;
  redirectOnSubmit?: boolean;
  showRegisterLink?: boolean;
}>(), {
  // 未传值时默认取true
  redirectOnSubmit: true,
  showRegisterLink: true
});

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

此时如果父组件主动传false，Prop值会是false，未传则为true，完全符合你的需求。

方案2：修改Prop类型绕过布尔默认规则（需要区分未传/传false场景时使用） #

如果你确实需要区分「主动传false」和「完全省略Prop」两种情况，只需要调整类型声明，让Vue不把该Prop判定为纯布尔类型即可：

<script lang="ts" setup>
const props = defineProps<{
  message?: string;
  // 联合 undefined 类型，让Vue不触发布尔默认赋值规则
  redirectOnSubmit?: boolean | undefined;
  showRegisterLink?: boolean | undefined;
}>();

console.log({ ...props });
// 未传Prop时，两个布尔属性的值都会是undefined，你可以自行判断处理
</script>

该规则是Vue内置的Prop处理逻辑，不支持全局关闭，只能针对需要的单个Prop按上述方式调整。

额外提示（针对路由组件场景） #

如果你是需要通过路由传递参数给路由组件，记得在路由配置中开启props: true，否则路由参数不会自动注入到组件Prop中：

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 开启props: true后，路由参数会自动作为Prop传递给LoginPage
    { name: RouteName.LOGIN, path: "/login", component: LoginPage, props: true },
    { name: RouteName.REGISTER, path: "/register", component: RegisterPage, props: true },
  ],
});

内容的提问来源于stack exchange，提问作者SimpleJ