Vue $emit() 方法
接收发出事件
自定义发出事件"toggle-favorite"现在从 FoodItem.vue 组件发出，但我们需要侦听 App.vue 父组件中的事件并调用执行某些操作的方法，以便我们可以看到事件发生。
我们在创建组件的 App.vue 中使用简写 @ 而不是 v-on: 来监听事件:
示例
监听 App.vue 中的"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"事件发生时，我们需要在 App.vue 中创建"testEmit"方法，以便我们可以看到事件发生:
methods: {
receiveEmit() {
alert('Hello World!');
}
}更改父项中食物项的"收藏夹"状态
我们现在有一个事件，当从子组件中单击"收藏夹"按钮时，该事件会通知 App.vue。
我们希望在单击"收藏夹"按钮时更改 App.vue 中"食物"数组中的"收藏夹"属性，以获取正确的食物项。 为此，我们将食品名称从 FoodItem.vue 发送到 App.vue，因为每个食品名称都是唯一的:
FoodItem.vue:
methods: {
toggleFavorite() {
this.$emit('toggle-favorite', this.foodName);
}
}我们现在可以在 App.vue 中接收食物名称，作为"toggle-favorite"事件发生时调用的方法的参数，如下所示:
现在我们知道点击了哪些食物项，我们可以更新"foods"数组中正确食物项的"favorite"状态:
App.vue:
methods: {
receiveEmit(foodId) {
const foundFood = this.foods.find(
food => food.name === foodId
);
foundFood.favorite = !foundFood.favorite;
}
}在上面的代码中，数组方法"find"遍历"foods"数组，查找 name 属性等于我们单击的食物项的对象，并将该对象作为"foundFood"返回。 之后，我们可以将 'foundFood.health' 设置为与之前相反，以便它在 true 和 false 之间切换。
在此处了解有关 JavaScript 数组方法"find"的更多信息。
在此处了解有关 JavaScript 箭头函数的更多信息。
'foods' 食物数组中的正确食物现在会更新其"收藏夹的"状态。 剩下的唯一一件事就是更新指示收藏夹的食物的图像。
因为食物项组件已经使用"foods"数组中的"favorite"状态创建，并作为 App.vue 中的"is-favorite"属性发送，所以我们只需要在 FoodItem.vue 中引用此"isFavorite"属性即可 v-show 其中 <img> 元素是更新图像:
<img src="/img_quality.svg" v-show="isFavorite">我们还可以删除 FoodItem.vue 中的"foodIsFavorite"数据属性，因为它不再使用。
'emits'选项
与我们在 FoodItem.vue 组件中声明 props 的方式相同，我们也可以使用 Vue 'emits' 选项来记录组件发出的内容。
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 被记录下来时，该组件将变得更容易被其他人使用。
