Props被用來將狀態傳遞給子元件。在這篇文章中，我們將學習有關Props的所有內容。

在元件內部定義prop

Props是元件從包含它們的元件（父元件）接收數據的方式。

當一個元件期望一個或多個prop時，它必須在其props屬性中定義它們：

Vue.component('user-name', {
 props: ['name'],
 template: '<p>Hi {{ name }}</p>'
})

或者，在Vue的Single File Component中：

<template>
 <p>{{ name }}</p>
</template>

<script>
export default {
 props: ['name']
}
</script>

接受多個prop

你可以通過將它們附加到陣列上來接受多個prop：

Vue.component('user-name', {
 props: ['firstName', 'lastName'],
 template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

設定prop的類型

你可以通過使用物件而不是陣列來指定prop的類型，使用每個屬性的名稱作為每個屬性的鍵，類型作為值：

Vue.component('user-name', {
 props: {
 firstName: String,
 lastName: String
 },
 template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

你可以使用的有效類型有：

  • String（字串）
  • Number（數字）
  • Boolean（布林值）
  • Array（陣列）
  • Object（物件）
  • Date（日期）
  • Function（函式）
  • Symbol（符號）

當類型不匹配時，Vue會在控制台中（在開發模式下）發出警告。

屬性類型可以更詳細地指定。

你可以允許多個不同的值類型：

props: {
 firstName: [String, Number]
}

設定必要的prop

你可以要求必要的prop：

props: {
 firstName: {
 type: String,
 required: true
 }
}

設定prop的預設值

你可以指定一個預設值：

props: {
 firstName: {
 type: String,
 default: 'Unknown person'
 }
}

對於物件：

props: {
 name: {
 type: Object,
 default: {
 firstName: 'Unknown',
 lastName: ''
 }
 }
}

default也可以是一個返回適當值的函式，而不是實際值。

你甚至可以建立一個自定義驗證器，這對於複雜的數據非常有用：

props: {
 name: {
 validator: name => {
 return name === 'Flavio'//只允許"Flavio"
 }
 }
}

將prop傳遞給元件

你可以使用以下語法將prop傳遞給元件：

<ComponentName color="white" />

如果傳遞的是一個靜態值。

如果是數據屬性，你可以使用以下方式：

<template>
 <ComponentName :color=color />
</template>

<script>
…
export default {
 //…
 data: function() {
 return {
 color: 'white'
 }
 },
 //…
}
</script>

你可以在prop值中使用三元操作符來檢查一個真值條件並根據其傳遞一個值：

<template>
 <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script>
…
export default {
 //…
 data: function() {
 return {
 color: 'white'
 }
 },
 //…
}
</script>