在Vue中,父組件和子組件之間的通信是非常常見的。其中,一種叫做“事件傳遞”的方法通常被使用,這種方法是通過emit和on來實現的。
在Vue中,我們可以將一個組件視為一個獨立的特殊對象。當在Vue模板中直接使用一個組件時,這個組件就變成了另一個組件的子組件。為了能夠讓父組件和子組件之間進行數據交互,我們需要使用emit方法。emit方法可以讓子組件將數據發送到其父組件。
Vue.component('list-item', { props: { item: Object }, methods: { deleteItem() { this.$emit('delete', this.item); } }, template: `{{ item.text }}` });
在這個示例中,我們有一個list-item組件,它有一個item屬性,該屬性綁定到父組件中的一個數據。組件中有一個刪除按鈕,點擊該按鈕,將會觸發deleteItem方法。在這個方法中,我們使用this.$emit('delete', this.item)發送了一個事件,這個事件帶有一個參數item。這個event將會被list組件所接收。
Vue.component('list', { data() { return { items: [ {id: 0, text: 'Item 1'}, {id: 1, text: 'Item 2'}, {id: 2, text: 'Item 3'}, ] } }, methods: { deleteItem(item) { this.items = this.items.filter(i =>i.id !== item.id); } }, template: `` });
這個示例中,我們創建了一個list組件,該組件顯示了一個項目列表。組件中有一個items數組,用于綁定到子組件(即list-item)。當我們需要從列表中刪除一個項目時,該操作實際上應該從父組件中進行。為了做到這一點,我們應該監聽list-item中的事件,并在list組件中編寫一個事件處理方法去更新items數組。
要實現這個功能,我們需要使用v-for指令來遍歷items數組,創建一個包含item屬性的list-item組件。在這里,我們同樣使用了@delete監聽器來將delete事件發送到deleteItem方法。在deleteItem方法中,我們更新items數組,刪除與傳入item.id相匹配的項。
盡管這只是一個簡單的示例,但它足以說明emit在Vue中父子組件之間通信的運作原理。