讓我們來(lái)聊聊Vue中的數(shù)組傳遞和轉(zhuǎn)換。對(duì)于一個(gè)Vue組件，我們經(jīng)常需要從父組件中獲取一個(gè)數(shù)組，并在子組件中對(duì)其進(jìn)行修改。這個(gè)過(guò)程中存在著一個(gè)問(wèn)題：當(dāng)我們嘗試修改這個(gè)數(shù)組的時(shí)候，Vue會(huì)警告說(shuō)我們不可以直接修改父組件中的數(shù)據(jù)。

props: {
items: {
type: Array,
required: true
}
},
data() {
return {
localItems: []
}
},
created() {
this.localItems = JSON.parse(JSON.stringify(this.items))
}

為了解決這個(gè)問(wèn)題，我們可以在子組件中使用一個(gè)本地的數(shù)組來(lái)存儲(chǔ)傳遞下來(lái)的數(shù)據(jù)，這樣我們就可以在子組件中自由地對(duì)這個(gè)數(shù)組進(jìn)行修改。代碼如上所示，在組件的props中聲明了一個(gè)items屬性，然后在data中定義一個(gè)localItems數(shù)組。在created鉤子函數(shù)中，我們使用了JSON.parse和JSON.stringify方法來(lái)將傳遞下來(lái)的items數(shù)組進(jìn)行克隆并賦值給localItems數(shù)組。

methods: {
updateItems() {
this.$emit('update:items', this.localItems)
}
}

現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了子組件對(duì)傳遞下來(lái)的數(shù)組進(jìn)行修改的功能，但是怎么將這個(gè)修改后的數(shù)組傳遞回給父組件呢？Vue提供了一個(gè)$emit方法來(lái)向父組件觸發(fā)事件。代碼如上所示，我們?cè)谧咏M件中定義了一個(gè)updateItems方法，在這個(gè)方法中使用$emit方法向父組件觸發(fā)一個(gè)名為update:items的自定義事件。其中update:items是Vue中的語(yǔ)法糖，實(shí)際上就是將事件名轉(zhuǎn)換為了kebab-case的格式，因此在父組件中需要監(jiān)聽(tīng)的事件名應(yīng)該為update-items。

現(xiàn)在我們已經(jīng)定義了子組件的props和events，那么如何在父組件中監(jiān)聽(tīng)子組件發(fā)出的事件呢？代碼如上所示，我們?cè)诟附M件中使用了一個(gè)子組件標(biāo)簽并綁定了一個(gè)items屬性，同時(shí)使用了@update-items來(lái)監(jiān)聽(tīng)子組件發(fā)出的update:items事件，并調(diào)用了一個(gè)名為updateItems的父組件方法。

updateItems(updatedItems) {
this.items = updatedItems
}

最后，我們?cè)诟附M件中定義了一個(gè)名為updateItems的方法，當(dāng)子組件觸發(fā)update:items事件時(shí)，我們就可以在這個(gè)方法中將子組件傳遞回來(lái)的修改后的數(shù)組重新賦值給父組件的items屬性，從而完成整個(gè)傳遞和轉(zhuǎn)換的過(guò)程。