在Vue中,props是父組件向子組件傳遞數據的一種方式。而prop傳遞數組也是常見的情況之一。
// 父組件// 子組件
- {{ fruit }}
在父組件模板中,我們將父組件中的fruitList數組作為props傳遞給了子組件。在子組件的props中,我們定義了一個名為list的屬性來接收傳遞過來的數組。
在子組件引用list數組時,使用了Vue中常見的v-for指令,將數組中的每個數據項分別遍歷輸出為一個li元素。
需要注意的是,在子組件中并不能修改傳遞過來的props,如果需要對數組進行修改,可以考慮使用computed屬性。例如,我們在子組件中通過計算屬性sortedList來對父組件傳遞過來的數組進行升序排序的操作。
- {{ fruit }}
這里通過computed屬性sortedList對父組件傳遞過來的list數組進行了升序排序,然后在模板中使用sortedList來遍歷輸出每個數據項。
以上就是關于Vue中prop傳遞數組的詳細介紹。在使用prop傳遞數組時,需要注意不要在子組件中直接修改傳遞過來的數組,可以使用computed屬性對數組進行操作。