>[success] # defineProps `defineProps` 作為編譯器宏幾個用法特點 * 不需要被導入即可使用，它會在編譯`<script setup>`語法塊時一同編譯掉 * 只能在`<script setup>`中使用 * 接收與`props`選項相同的值 * 必須在`<script setup>`的頂層使用，不可以在`<script setup>`的局部變量中引用。 * `defineProps()`宏中的參數不可以訪問`<script setup>`中定義的其他變量，因為在編譯時整個表達式都會被移到外部的函數中。 1. 不需要被導入即可使用，它會在編譯`<script setup>`語法塊時一同編譯掉 ~~~html <template> {{ props.name }} </template> <!--在頁面可以直接使用。但注意僅限頁面--> <template> {{ name }} </template> <script setup> // 無需導入直接使用 const props = defineProps({ name: String, }); </script> <style></style> ~~~ 2. 接收與`props`選項相同的值 ~~~ html <template> {{ props.name }} </template> <script setup> import props from '../Props/props'; // const props = defineProps(['name']); /** * 支持配置字段 type 類型，required 是否必填，default默認值，validator 校驗 * interface PropOptions<T> { * type?: PropType<T> * required?: boolean * default?: T | ((rawProps: object) => T) * validator?: (value: unknown) => boolean * } * */ // const props = defineProps({ name: String }); // 設置類型 const props = defineProps({ name: { type: String, require: true, default: '1', validator: (value) => { return value.length > 1; }, }, }); </script> <style></style> ~~~ 3. 必須在`<script setup>`的頂層使用，不可以在`<script setup>`的局部變量中引用。 ~~~html <template> {{ a.name }} </template> <script setup> // 報錯不能在局部變量中使用：ReferenceError: defineProps is not defined function aFun() { const props = defineProps({ name: { type: String, require: true, default: '1', validator: (value) => { return value.length > 1; }, }, }); return props; } const a = aFun(); </script> <style></style> ~~~ 4. `defineProps()` 宏中的參數不可以訪問 `<script setup>` 中定義的其他變量，因為在編譯時整個表達式都會被移到外部的函數中。 ~~~html <template> {{ props.name }} </template> <script setup> const len = 1; const props = defineProps({ name: { type: String, require: true, default: '1', validator: (value) => { // 報錯 `defineProps` are referencing locally declared variables return value.length > len; }, }, }); </script> <style></style> ~~~ 5. 只能在`<script setup>`中使用 * 在其他文件聲明了一個`defineProps` ~~~ import { defineProps } from 'vue'; export default defineProps({ name: { type: String, require: true, default: '1', validator: (value) => { return value.length > 1; }, }, }); ~~~ * 使用報錯 ~~~html <template> <div>測試</div> <children :name="1" /> </template> <script setup> // 警告defineProps() is a compiler-hint helper that is only usable inside <script setup> of a single file component. Its arguments should be compiled away and passing it at runtime has no effect. import children from './components/children.vue'; </script> <style></style> ~~~ >[danger] ##### 其他配置項 1. 所有 prop 默認都是可選的，除非聲明了`required: true`。  2. 未傳遞的 prop 會有一個缺省值`undefined` 3. 如果聲明了`default`值，那么在 prop 的值被解析為`undefined`時，無論 prop 是未被傳遞還是顯式指明的`undefined`，都會改為`default`值。 4. 聲明多類型 ~~~ defineProps({ disabled: [Boolean, Number] }) ~~~ 5. 可以檢測的類型，`String` `Number` `Boolean` `Array` `Object` `Date` `Function` `Symbol` `自定義類` * 自定義類舉例子 ~~~ class Person { constructor(firstName, lastName) { this.firstName = firstName this.lastName = lastName } } defineProps({ author: Person }) ~~~ >[danger] ##### 使用技巧 1. **prop 被用于傳入初始值；而子組件想在之后將其作為一個局部數據屬性。** 在這種情況下，最好是新定義一個局部數據屬性，從 prop 上獲取初始值即可： ~~~ const props = defineProps(['initialCounter']) // 計數器只是將 props.initialCounter 作為初始值 // 像下面這樣做就使 prop 和后續更新無關了 const counter = ref(props.initialCounter) ~~~ 2. **prop 以原始的形式傳入，但還需作轉換。** 在這種情況中，最好是基于該 prop 值定義一個計算屬性： ~~~ const props = defineProps(['size']) // 該 prop 變更時計算屬性也會自動更新 const normalizedSize = computed(() => props.size.trim().toLowerCase()) ~~~ >[info] ## 官網 [Props](https://cn.vuejs.org/guide/components/props.html)