雖然 Vue 可以很容易地向組件添加屬性，但有時您需要更多地控制允許添加哪些類型的東西。值得慶幸的是，Vue 提供了內置的方法來將類型檢查、驗證、默認值和約束添加到你的 prop 定義中。

類型檢查

您可以通過添加類型財產給它。

例如，以下組件將可能的輸入值限制為數字。

子組件.vue

<template>
  <h2>Numerical Property {{imperfectNumber}}</p>
</template>
<script>
export default {
  props: {
    imperfectNumber: {
      type: Number
    }
  }
}
</script>

父組件.vue

<template>
  <child-component :imperfectNumber="41"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}
</script>

允許的類型值為：

目的- 只允許對象，例如:myProp="{key: 'value'}".

大批- 只允許數組，例如:myProp=“[1, 2, 3]”.

功能只允許傳遞函數，例如 *:myProp=“function(test) { return test.toUpperCase() }”。

細繩- 只允許字符串，例如:myProp="'示例'"(或更簡單地說，myProp =“示例”)。

數字- 只允許數值，例如:myProp="103.4".

布爾值- 只允許真的要么錯誤的值，例如:myProp=“真”.

[任何構造函數]- 你也可以傳入類或構造函數，它會允許作為這些函數實例的道具。

默認值

您可以通過添加要求：真屬性定義的值。

props: {
  imperfectNumber: {
    type: Number,
    required: true
  }
}

或者，您可以為該屬性設置一個默認值，如果沒有傳入任何值，則將使用該默認值。

props: {
  imperfectNumber: {
    type: Number,
    default: 43
  }
}

您甚至可以將其設置為生成動態默認值的函數!

props: {
  imperfectNumber: {
    type: Number,
    default: () => Math.random()
  }
}

自定義驗證器

對于更復雜的對象，還可以添加自定義驗證器職能。驗證器只是一個接受輸入屬性值并返回布爾值的函數，真的如果有效，錯誤的否則。

props: {
  imperfectNumber: {
    type: Number,
    validator: value => {
      // Only accepts values that contain the string 'cookie-dough'.
      return value.indexOf('cookie-dough') !== -1
    }
  }
}

通過組合這些屬性，您可以穩健地處理用戶可能向您的組件拋出的幾乎任何值，并使其更易于理解。如果大家想了解更多相關知識，可以關注一下動力節點的Java視頻，里面的課程內容全面細致，從入門到精通，相信對大家的學習會有所幫助的。