在 Vue 3 中，接收?props?有兩種主要的寫法，分別是運行時聲明和基于類型的聲明。下面為你詳細介紹這兩種寫法。
1. 運行時聲明
運行時聲明是 Vue 2 中就已經存在的方式，在 Vue 3 中依然可以使用。這種方式通過在組件中使用?defineProps?宏來定義?props，并且可以指定?props?的類型、默認值和驗證規則。
示例代碼
<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup>
// 使用運行時聲明接收props
const props = defineProps({name: {type: String,required: true},age: {type: Number,default: 18}
});
</script>代碼解釋
defineProps?是一個宏，用于定義組件的?props。name?和?age?是定義的兩個?props。name?是一個必需的字符串類型的?prop。age?是一個可選的數字類型的?prop，默認值為?18。
2. 基于類型的聲明
基于類型的聲明是 Vue 3 新增的特性，它利用 TypeScript 的類型系統來定義?props。這種方式更加簡潔，并且可以提供更好的類型檢查。
示例代碼
<template><div><p>Name: {{ name }}</p><p>Age: {{ age }}</p></div>
</template><script setup lang="ts">
// 使用基于類型的聲明接收props
interface Props {name: string;age?: number;
}const props = defineProps<Props>();
</script>代碼解釋
- 首先定義了一個?
Props?接口，用于描述?props?的類型。 name?是一個必需的字符串類型的?prop。age?是一個可選的數字類型的?prop。defineProps<Props>()?使用泛型來指定?props?的類型。
兩種寫法的對比
- 運行時聲明：適用于不使用 TypeScript 的項目，或者需要定義復雜的驗證規則和默認值的場景。
- 基于類型的聲明：適用于使用 TypeScript 的項目，它可以提供更好的類型檢查和代碼提示。
使用組件
無論使用哪種方式聲明?props，使用組件時傳遞?props?的方式是相同的。
<template><MyComponent name="John" age="25" />
</template><script setup>
import MyComponent from './MyComponent.vue';
</script>以上就是 Vue 3 中接收?props?的兩種主要寫法。
