前端必知必会之Vue $emit()方法详解

Vue $emit() 方法

使用 Vue 中内置的 $emit() 方法，我们可以在子组件中创建一个自定义事件，该事件可以在父元素中捕获。

Props 用于将数据从父元素发送到子组件，而 $emit() 用于执行相反的操作：将信息从子组件传递到父组件。

我们接下来要做的事情的目的是最终在父 App.vue 中更改食品的“收藏”状态，而不是在当前发生变化的 FoodItem.vue 子组件中更改。

在 App.vue 中而不是在 FoodItem.vue 中更改收藏状态的原因是，App.vue 是收藏状态的存储位置，因此需要更新。在较大的项目中，数据可能来自我们在 App.vue 中连接的数据库，并且我们希望组件中发生的更改会在数据库中进行更改，因此我们需要从子组件向父组件进行通信。

发出自定义事件

需要将信息从组件发送到父级，我们使用内置方法 $emit() 来执行此操作。

我们在 FoodItem.vue 组件中已经有 toggleFavorite 方法，该方法在单击切换按钮时运行。现在让我们删除现有行并添加一行以发出我们的自定义事件“toggle-favorite”：

FoodItem.vue：

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

我们可以选择自定义事件的名称，但使用短横线命名来发出事件是正常的。

接收发射事件

自定义发射事件“toggle-favorite”现在从 FoodItem.vue 组件发射，但我们需要在 App.vue 父级中监听该事件并调用执行某些操作的方法，以便我们可以看到事件已发生。

在创建组件的 App.vue 中，我们使用简写 @ 而不是 v-on: 来监听事件：

示例获取您自己的 Vue 服务器
在 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 中创建 acceptEmit 方法，以便我们可以看到事件发生了：

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

在父组件中更改食物项目的“favorite”状态

我们现在有一个事件，当从子组件单击“favorite”按钮时，它会通知 App.vue。

当单击“favorite”按钮时，我们想要将 App.vue 中“foods”数组中的“favorite”属性更改为正确的食物项目。为此，我们将食物项目名称从 FoodItem.vue 发送到 App.vue，因为每个食物项目的名称都是唯一的：

FoodItem.vue:

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

我们现在可以在 App.vue 中接收食物名称作为 ‘toggle-favorite’ 事件发生时调用的方法的参数，如下所示：

示例

App.vue:

methods: {
receiveEmit(foodId) {
alert('您点击了：'+foodId);
}
}

现在我们知道了被点击的食物，我们可以更新’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 之间切换。

“foods”数组中的正确食物现在会更新其“favorite”状态。剩下的唯一事情就是更新指示最喜欢的食物的图像。

因为食物组件已经使用来自“foods”数组的“favorite”状态创建，并作为来自 App.vue 的 prop“is-favorite”发送，所以我们只需从 v-show 引用 FoodItem.vue 中的这个“isFavorite”prop，其中 <img> 元素用于更新图像：

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

我们还可以删除 FoodItem.vue 中的“foodIsFavorite”数据属性，因为它不再使用。

示例
在此最后的示例代码中，可以以与之前类似的方式切换食物的收藏状态，但现在收藏状态在 App.vue 内的正确位置进行了修改。

“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 被记录下来后，其他人就可以更轻松地使用该组件。

总结

到此这篇关于前端必知必会之Vue $emit()方法详解的文章就介绍到这了,更多相关前端Vue $emit()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论