我正在使用 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完全傳遞和省略道具。
uj5u.com熱心網友回復：
false如果defaultprop 宣告中沒有指定，Vue 默認布爾道具為。Vue 的作者解釋了其中的道理：
布爾轉換遵循與布爾屬性相同的規則：任何值的存在都被轉換為真，不存在意味著假。
要將道具默認為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>
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/339770.html
上一篇：在動作中訪問狀態顯示空狀態
下一篇：屬性總是需要在資料中宣告：{}