Vue $emit() 方法

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

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

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

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

發(fā)出自定義事件

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

我們?cè)?FoodItem.vue 組件中已經(jīng)有 toggleFavorite 方法，該方法在單擊切換按鈕時(shí)運(yùn)行?，F(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 父級(jí)中監(jiān)聽該事件并調(diào)用執(zhí)行某些操作的方法，以便我們可以看到事件已發(fā)生。

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

示例獲取您自己的 Vue 服務(wù)器
在 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"
/>

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

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

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

我們現(xiàn)在有一個(gè)事件，當(dāng)從子組件單擊“favorite”按鈕時(shí)，它會(huì)通知 App.vue。

當(dāng)單擊“favorite”按鈕時(shí)，我們想要將 App.vue 中“foods”數(shù)組中的“favorite”屬性更改為正確的食物項(xiàng)目。為此，我們將食物項(xiàng)目名稱從 FoodItem.vue 發(fā)送到 App.vue，因?yàn)槊總€(gè)食物項(xiàng)目的名稱都是唯一的：

FoodItem.vue:

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

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

示例

App.vue:

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

現(xiàn)在我們知道了被點(diǎ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 屬性等于我們單擊的食物項(xiàng)的對(duì)象，并將該對(duì)象返回為“foundFood”。之后，我們可以將“foundFood.health”設(shè)置為與之前相反的值，以便它在 true 和 false 之間切換。

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

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

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

我們還可以刪除 FoodItem.vue 中的“foodIsFavorite”數(shù)據(jù)屬性，因?yàn)樗辉偈褂谩?/p>

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

“emits”選項(xiàng)

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

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

這就是我們?nèi)绾卧?FoodItem.vue 組件中記錄 emit 的方法

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

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

總結(jié)

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

最新評(píng)論