當我們使用Vue開發時,我們經常需要在父組件和子組件之間傳遞數據。其中一種傳遞數據的方式就是props。props是父組件向子組件傳遞數據的一種方式。在Vue中,我們可以將props看作是子組件的配置項,父組件可以通過設置子組件的props來靈活地傳遞數據。
在Vue中使用props傳遞數組和傳遞對象其實是類似的。我們只需要在props中聲明一個名為"items"的屬性,然后在父組件中傳遞一個數組即可:
// 子組件
Vue.component('item-list', {
props: ['items'],
template: `- {{ item }}
`
})
// 父組件
new Vue({
el: '#app',
data: {
itemList: ['item1', 'item2', 'item3']
}
})
上面代碼中,我們在子組件中用props接收父組件中的數組。在子組件中使用v-for指令遍歷props中的數組,然后渲染出來。
在props中使用數組有些小技巧。我們可以使用type選項來指定props接收的數據類型。在這個例子中,我們可以把type設置為Array。
Vue.component('item-list', {
props: {
items: {
type: Array,
required: true
}
},
template: `- {{ item }}
`
})
在上面代碼中,我們設置了items的類型為Array,并且設置了required為true。這樣,如果父組件沒有傳遞items,就會顯示一個控制臺的錯誤提示。
除此之外,我們還可以設置props的validator選項來設置props的驗證規則。validator是一個函數,用來對props進行驗證。如果驗證失敗,就會顯示一個警告。
Vue.component('item-list', {
props: {
items: {
type: Array,
required: true,
validator: function(value) {
return Array.isArray(value) && value.length >0;
}
}
},
template: `- {{ item }}
`
})
在這個例子中,我們設置了validator選項,并且定義了驗證函數。在驗證函數中,我們判斷傳遞的數據是否為數組,并且長度是否大于0。如果驗證失敗,就會顯示一個警告。
總結一下,使用props傳遞數組非常簡單。我們只需要在子組件中聲明一個props,在父組件中傳遞一個數組即可。在聲明props時,我們還可以設置類型、是否必須和驗證規則等選項,這樣可以使props的使用更加安全和靈活。