时间戳

首页 > 解决方案 > Vue 3 如何传递一个可选的布尔道具？

typescript - Vue 3 如何传递一个可选的布尔道具？

问题描述

我正在使用 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和完全省略道具。

标签： typescriptvue.jsvuejs3vite

解决方案

如果在 prop 声明中false没有指定， Vue 默认 Boolean props 为。defaultVue的作者解释了原因：

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

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

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

使用defineProps()in 时<script setup>，您只能将 prop 声明对象用作函数参数。由于defineProps()只接受函数参数或泛型类型参数，所有道具都必须在函数参数中声明：

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

演示

推荐阅读