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

類(lèi)型檢查

您可以通過(guò)添加類(lèi)型財(cái)產(chǎn)給它。

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

子組件.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>

允許的類(lèi)型值為：

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

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

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

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

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

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

[任何構(gòu)造函數(shù)]- 你也可以傳入類(lèi)或構(gòu)造函數(shù)，它會(huì)允許作為這些函數(shù)實(shí)例的道具。

默認(rèn)值

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

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

或者，您可以為該屬性設(shè)置一個(gè)默認(rèn)值，如果沒(méi)有傳入任何值，則將使用該默認(rèn)值。

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

您甚至可以將其設(shè)置為生成動(dòng)態(tài)默認(rèn)值的函數(shù)!

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

自定義驗(yàn)證器

對(duì)于更復(fù)雜的對(duì)象，還可以添加自定義驗(yàn)證器職能。驗(yàn)證器只是一個(gè)接受輸入屬性值并返回布爾值的函數(shù)，真的如果有效，錯(cuò)誤的否則。

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

通過(guò)組合這些屬性，您可以穩(wěn)健地處理用戶(hù)可能向您的組件拋出的幾乎任何值，并使其更易于理解。如果大家想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java視頻，里面的課程內(nèi)容全面細(xì)致，從入門(mén)到精通，相信對(duì)大家的學(xué)習(xí)會(huì)有所幫助的。