25 组件间通信之自定义事件的使用

在前一章中，我们学习了父子组件之间的传值方式，本章将继续探讨组件间的通信机制，具体聚焦于自定义事件的使用。自定义事件是一种常用的跨组件通信方式，特别是在子组件向父组件发送信息时极为有效。本章将通过详细的例子来展示如何使用自定义事件，从而增强各个组件之间的互动性。

自定义事件简介

自定义事件是 Vue 中的一个重要概念，允许子组件通过触发事件向父组件传递信息。父组件可以监听这些事件，并根据收到的信息做出反应。自定义事件可以使用 $emit 方法在子组件中触发，父组件则通过 v-on 指令或者 @ 简写语法来监听这些事件。

语法示例

// 在子组件中使用 $emit
this.$emit('事件名称', 数据);

<!-- 在父组件中监听事件 -->
<子组件 @事件名称="事件处理方法"></子组件>

使用案例

让我们通过一个实际的例子来深入理解自定义事件的使用。假设我们有一个简单的购物车应用，我们需要在子组件中添加商品到购物车，并在父组件中更新购物车的数量。

步骤一：创建子组件

<template>
  <div>
    <button @click="addToCart">添加到购物车</button>
  </div>
</template>

<script>
export default {
  methods: {
    addToCart() {
      // 假设我们添加了一个商品，触发自定义事件
      this.$emit('add-to-cart', { id: 1, name: '商品名称' });
    }
  }
}
</script>

在这个子组件中，用户点击“添加到购物车”按钮时，addToCart 方法会被调用，随之 $emit 触发 add-to-cart 事件，并将商品信息作为参数传递。

步骤二：创建父组件

<template>
  <div>
    <h1>购物车</h1>
    <p>购物车商品数量: {{ cartCount }}</p>
    <子组件 @add-to-cart="handleAddToCart"></子组件>
  </div>
</template>

<script>
import 子组件 from './子组件.vue';

export default {
  components: {
    子组件
  },
  data() {
    return {
      cartCount: 0
    }
  },
  methods: {
    handleAddToCart(item) {
      // 接收到来自子组件的事件
      this.cartCount++;
      console.log(`添加商品到购物车: ${item.name}`);
    }
  }
}
</script>

在父组件中，我们使用 @add-to-cart 监听来自子组件的事件，并且 handleAddToCart 方法会处理这个事件，更新 cartCount 的数量并输出添加的商品名称。

整体效果

通过上述实现，我们的购物车组件已经当用户点击“添加到购物车”按钮时，能够有效地传递数据并更新父组件的状态。这种组件间的通信机制使得我们的应用更加灵活和易于维护。

总结

在本章中，我们讨论了如何使用自定义事件在 Vue 组件之间进行通信。自定义事件通过 $emit 方法由子组件触发，父组件通过监听这些事件来接收数据。这种方式使得组件更加解耦，便于管理和维护。接下来，我们将探索另一种组件间的通信方式——插槽的概念，进一步提升我们的组件设计能力。