Vue.js元件屬性（Props）
Props被用來將狀態傳遞給子元件。在這篇文章中，我們將學習有關Props的所有內容。
在元件內部定義prop
Props是元件從包含它們的元件（父元件）接收數據的方式。
當一個元件期望一個或多個prop時，它必須在其props屬性中定義它們：
1
2
3
4
| Vue.component('user-name', {
props: ['name'],
template: '<p>Hi {{ name }}</p>'
})
|
或者，在Vue的Single File Component中：
1
2
3
4
5
6
7
8
9
| <template>
<p>{{ name }}</p>
</template>
<script>
export default {
props: ['name']
}
</script>
|
接受多個prop
你可以通過將它們附加到陣列上來接受多個prop：
1
2
3
4
| Vue.component('user-name', {
props: ['firstName', 'lastName'],
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
|
設定prop的類型
你可以通過使用物件而不是陣列來指定prop的類型，使用每個屬性的名稱作為每個屬性的鍵，類型作為值：
1
2
3
4
5
6
7
| Vue.component('user-name', {
props: {
firstName: String,
lastName: String
},
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
|
你可以使用的有效類型有：
- String（字串）
- Number（數字）
- Boolean（布林值）
- Array（陣列）
- Object（物件）
- Date（日期）
- Function（函式）
- Symbol（符號）
當類型不匹配時，Vue會在控制台中（在開發模式下）發出警告。
屬性類型可以更詳細地指定。
你可以允許多個不同的值類型：
1
2
3
| props: {
firstName: [String, Number]
}
|
設定必要的prop
你可以要求必要的prop：
1
2
3
4
5
6
| props: {
firstName: {
type: String,
required: true
}
}
|
設定prop的預設值
你可以指定一個預設值：
1
2
3
4
5
6
| props: {
firstName: {
type: String,
default: 'Unknown person'
}
}
|
對於物件：
1
2
3
4
5
6
7
8
9
| props: {
name: {
type: Object,
default: {
firstName: 'Unknown',
lastName: ''
}
}
}
|
default也可以是一個返回適當值的函式，而不是實際值。
你甚至可以建立一個自定義驗證器，這對於複雜的數據非常有用：
1
2
3
4
5
6
7
| props: {
name: {
validator: name => {
return name === 'Flavio'
}
}
}
|
將prop傳遞給元件
你可以使用以下語法將prop傳遞給元件：
1
| <ComponentName color="white" />
|
如果傳遞的是一個靜態值。
如果是數據屬性，你可以使用以下方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<ComponentName :color=color />
</template>
<script>
…
export default {
data: function() {
return {
color: 'white'
}
},
}
</script>
|
你可以在prop值中使用三元操作符來檢查一個真值條件並根據其傳遞一個值：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <template>
<ComponentName :colored="color == 'white' ? true : false" />
</template>
<script>
…
export default {
data: function() {
return {
color: 'white'
}
},
}
</script>
|
tags: [“Vue.js”, “元件”, “Prop”]