在數組和物件數組中聲明 props

Question

我剛剛發現，不要像這樣定義元件的屬性：constprops=defineProps({id:Number,title:String,name:String,})我可以這樣做：defineProps(['id','title','name' ,])這似乎不需要type聲明，但是這樣做有什麼缺點嗎？ vue是否自己確定每個屬性的type？我正在使用scriptsetup。

P粉023326773 · Answer

這不僅僅是 type 宣告。

這是一個道具驗證功能。完整的語法是

const props = defineProps({
    name: String,
    id: [ Number, String ],
    style: {
        type: Object,
        default: ()=>{
            color: "red",
            bg-color: "white"
        },
        validator: function (value) {
            return ['red', 'blue', 'green'].includes(value.color)
        }
    },
})

因此，只使用命名道具的缺點是：

沒有 類型安全性 。但即使在 typed props 的情況下，它也只會在開發建置中顯示控制台警告。

而使用 prop 定義的優點是

單一 prop 的多個 types
道具的預設值
自訂驗證器函數

P粉262113569 · Answer

缺點當然是安全性較差。

vue 會自行決定每個屬性的型別嗎？ 不會

當提供字串陣列時，Vue 根本不會驗證傳遞的props 的類型，因此如果使用不正確（這種情況更有可能發生，因為其他開發者/未來你無法知道應該傳遞什麼不閱讀元件的其餘程式碼）您最終會在元件中的某個位置出現一些執行時間錯誤，而不是關於作為prop 傳遞的錯誤值的乾淨錯誤/警告（或來自IDE 的合理錯誤）

大多數時候，您應該使用盡可能多的特定道具定義。