Vue $emit() 方法

使用 Vue 中內置的 $emit() 方法，我們可以在子組件中創(chuàng)建一個自定義事件，該事件可以在父元素中捕獲。

Props 用于將數(shù)據(jù)從父元素發(fā)送到子組件，而 $emit() 用于執(zhí)行相反的操作：將信息從子組件傳遞到父組件。

我們接下來要做的事情的目的是最終在父 App.vue 中更改食品的“收藏”狀態(tài)，而不是在當前發(fā)生變化的 FoodItem.vue 子組件中更改。

在 App.vue 中而不是在 FoodItem.vue 中更改收藏狀態(tài)的原因是，App.vue 是收藏狀態(tài)的存儲位置，因此需要更新。在較大的項目中，數(shù)據(jù)可能來自我們在 App.vue 中連接的數(shù)據(jù)庫，并且我們希望組件中發(fā)生的更改會在數(shù)據(jù)庫中進行更改，因此我們需要從子組件向父組件進行通信。

發(fā)出自定義事件

需要將信息從組件發(fā)送到父級，我們使用內置方法 $emit() 來執(zhí)行此操作。

我們在 FoodItem.vue 組件中已經有 toggleFavorite 方法，該方法在單擊切換按鈕時運行。現(xiàn)在讓我們刪除現(xiàn)有行并添加一行以發(fā)出我們的自定義事件“toggle-favorite”：

FoodItem.vue：

methods: {
  toggleFavorite() {
    //this.foodIsFavorite = !this.foodIsFavorite;
    this.$emit('toggle-Favorite');
  }
}

我們可以選擇自定義事件的名稱，但使用短橫線命名來發(fā)出事件是正常的。

接收發(fā)射事件

自定義發(fā)射事件“toggle-favorite”現(xiàn)在從 FoodItem.vue 組件發(fā)射，但我們需要在 App.vue 父級中監(jiān)聽該事件并調用執(zhí)行某些操作的方法，以便我們可以看到事件已發(fā)生。

在創(chuàng)建組件的 App.vue 中，我們使用簡寫 @ 而不是 v-on: 來監(jiān)聽事件：

示例獲取您自己的 Vue 服務器
在 App.vue 中監(jiān)聽 ‘toggle-favorite’ 事件：

<food-item
v-for="x in foods"
:key="x.name"
:food-name="x.name"
:food-desc="x.desc"
:is-favorite="x.favorite"
@toggle-favorite="receiveEmit"
/>

當我們的自定義 ‘toggle-favorite’ 事件發(fā)生時，我們需要在 App.vue 中創(chuàng)建 acceptEmit 方法，以便我們可以看到事件發(fā)生了：

methods: {
  receiveEmit() {
    alert('Hello World!');
  }
}

在父組件中更改食物項目的“favorite”狀態(tài)

我們現(xiàn)在有一個事件，當從子組件單擊“favorite”按鈕時，它會通知 App.vue。

當單擊“favorite”按鈕時，我們想要將 App.vue 中“foods”數(shù)組中的“favorite”屬性更改為正確的食物項目。為此，我們將食物項目名稱從 FoodItem.vue 發(fā)送到 App.vue，因為每個食物項目的名稱都是唯一的：

FoodItem.vue:

methods: {
  toggleFavorite() {
    this.$emit('toggle-favorite', this.foodName);
  }
}

我們現(xiàn)在可以在 App.vue 中接收食物名稱作為 ‘toggle-favorite’ 事件發(fā)生時調用的方法的參數(shù)，如下所示：

示例

App.vue:

methods: {
receiveEmit(foodId) {
alert('您點擊了：'+foodId);
}
}

現(xiàn)在我們知道了被點擊的食物，我們可以更新’foods’數(shù)組中正確食物的’favorite’狀態(tài)：

App.vue:

methods: {
receiveEmit(foodId) {
const foundFood = this.foods.find(
food => food.name ===foodId
);
foundFood.favorite = !foundFood.favorite;
}
}

在上面的代碼中，數(shù)組方法“find”遍歷“foods”數(shù)組并查找 name 屬性等于我們單擊的食物項的對象，并將該對象返回為“foundFood”。之后，我們可以將“foundFood.health”設置為與之前相反的值，以便它在 true 和 false 之間切換。

“foods”數(shù)組中的正確食物現(xiàn)在會更新其“favorite”狀態(tài)。剩下的唯一事情就是更新指示最喜歡的食物的圖像。

因為食物組件已經使用來自“foods”數(shù)組的“favorite”狀態(tài)創(chuàng)建，并作為來自 App.vue 的 prop“is-favorite”發(fā)送，所以我們只需從 v-show 引用 FoodItem.vue 中的這個“isFavorite”prop，其中 <img> 元素用于更新圖像：

<img src="/img_quality.svg" v-show="isFavorite">

我們還可以刪除 FoodItem.vue 中的“foodIsFavorite”數(shù)據(jù)屬性，因為它不再使用。

示例
在此最后的示例代碼中，可以以與之前類似的方式切換食物的收藏狀態(tài)，但現(xiàn)在收藏狀態(tài)在 App.vue 內的正確位置進行了修改。

“emits”選項

以我們在 FoodItem.vue 組件內聲明 props 的方式，我們也可以使用 Vue“emits”選項記錄組件發(fā)出的內容。

Props 必須在組件中聲明，而 emits 則建議記錄下來。

這就是我們如何在 FoodItem.vue 組件中記錄 emit 的方法

<script>
export default {
props: ['foodName','foodDesc','isFavorite'],
emits: ['toggle-favorite'],
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}
};
</script>

當 emits 被記錄下來后，其他人就可以更輕松地使用該組件。

總結

到此這篇關于前端必知必會之Vue $emit()方法詳解的文章就介紹到這了,更多相關前端Vue $emit()方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論