当前位置：首页 > article >正文

Vue3 进阶-自定义事件用法全解析 ✨

article 2025/2/10 15:28:34

Hey小伙伴们！今天来给大家分享一个 Vue3 中非常实用的功能——自定义事件（Custom Events） 的使用方法。通过自定义事件，我们可以在父子组件之间进行更灵活的数据传递和通信。

如果你对 Vue3 感兴趣，或者想学习如何更好地组织和管理组件间的交互，那这篇笔记一定要收藏哦！🚀

👉 什么是自定义事件？

在 Vue3 中，自定义事件 是一种用于子组件向父组件发送消息的机制。通过 $emit 方法，子组件可以触发一个自定义事件，并将数据作为参数传递给父组件。这样，父组件就可以监听这些事件并做出相应的处理。

自定义事件提供了一种非父子关系的组件间通信方式，使得代码更加模块化、清晰易读。

👉 为什么需要自定义事件？

在实际项目中，我们经常会遇到需要在多个组件之间共享数据或状态的情况。传统的 Props 机制虽然强大，但它是单向数据流，只能从父组件向子组件传递数据。而自定义事件则允许我们实现反向通信，即子组件向父组件发送消息。

使用自定义事件的主要好处包括：

简化组件间的通信：通过自定义事件，我们可以轻松地在子组件和父组件之间传递数据。
提高代码的可维护性：自定义事件使得组件之间的依赖关系更加清晰，便于维护和扩展。
增强组件的复用性：通过自定义事件，我们可以创建高度可复用的组件，减少重复代码。

👉 案例场景：购物车商品数量更新

我们来实现一个简单的案例：使用自定义事件在父组件和子组件之间同步购物车中的商品数量。我们将创建两个组件：ProductCard 和 ShoppingCart，并在父组件中组合使用它们。

1. 创建 ProductCard 组件

首先，我们创建一个用于显示商品信息的组件 ProductCard.vue。在这个组件中，用户可以选择增加或减少商品的数量，并通过自定义事件通知父组件更新购物车中的数量。

<template>
  <div class="product-card">
    <h3>{{ product.name }}</h3>
    <p>价格: {{ product.price }} 元</p>
    <div>
      <button @click="decreaseQuantity">-</button>
      <span>{{ quantity }}</span>
      <button @click="increaseQuantity">+</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    product: {
      type: Object,
      required: true,
    },
    initialQuantity: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      quantity: this.initialQuantity,
    };
  },
  methods: {
    increaseQuantity() {
      this.quantity++;
      this.$emit('quantity-updated', this.quantity);
    },
    decreaseQuantity() {
      if (this.quantity > 0) {
        this.quantity--;
        this.$emit('quantity-updated', this.quantity);
      }
    },
  },
};
</script>

<style scoped>
.product-card {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 8px;
}
</style>

2. 创建 ShoppingCart 组件

接下来，我们创建一个用于显示购物车信息的组件 ShoppingCart.vue。这个组件会接收来自 ProductCard 组件的事件，并更新购物车中的商品数量。

<template>
  <div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }} - 数量: {{ item.quantity }}
      </li>
    </ul>
    <p>总价: {{ totalAmount }} 元</p>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
  computed: {
    totalAmount() {
      return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
};
</script>

<style scoped>
.shopping-cart {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 8px;
}
</style>

3. 在父组件中使用这两个子组件

现在，我们在父组件中组合使用这两个子组件，并通过自定义事件同步商品数量。

<template>
  <div>
    <h1>商品列表</h1>

    <!-- 商品卡片 -->
    <ProductCard
      v-for="(product, index) in products"
      :key="index"
      :product="product"
      :initialQuantity="cartItems[index].quantity"
      @quantity-updated="updateCartItem(index, $event)"
    />

    <!-- 购物车 -->
    <ShoppingCart :items="cartItems" />
  </div>
</template>

<script>
import { reactive } from 'vue';
import ProductCard from './components/ProductCard.vue';
import ShoppingCart from './components/ShoppingCart.vue';

export default {
  components: {
    ProductCard,
    ShoppingCart,
  },
  setup() {
    const products = reactive([
      { id: 1, name: 'iPhone 13', price: 6999 },
      { id: 2, name: 'MacBook Pro', price: 12999 },
    ]);

    const cartItems = reactive([
      { ...products[0], quantity: 1 },
      { ...products[1], quantity: 1 },
    ]);

    const updateCartItem = (index, newQuantity) => {
      cartItems[index].quantity = newQuantity;
    };

    return {
      products,
      cartItems,
      updateCartItem,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

👉 关键点解析

Props 的定义：
- 在 ProductCard 组件中，我们通过 props 选项定义了哪些属性可以从父组件接收。
- product 属性用于传递商品信息，initialQuantity 属性用于设置初始数量。
自定义事件的触发：
- 在 ProductCard 组件中，我们使用 $emit 方法触发了一个名为 quantity-updated 的自定义事件，并将新的数量作为参数传递给父组件。
- 父组件通过监听这个事件并调用 updateCartItem 方法来更新购物车中的商品数量。
计算属性：
- 在 ShoppingCart 组件中，我们使用了计算属性 totalAmount 来动态计算购物车中的总价。

👉 更多扩展

事件修饰符：
- Vue 提供了一些有用的事件修饰符（如 .stop、.prevent 等），可以帮助我们更方便地处理事件行为。例如，在表单提交时使用 .prevent 可以阻止默认行为。
动态事件绑定：
- 我们可以通过动态绑定事件的方式来实现更灵活的事件处理逻辑。例如，使用 v-on:[eventName]="handler" 动态绑定事件名称。
事件总线（Event Bus）：
- 对于非父子关系的组件间通信，可以使用事件总线（Event Bus）来实现。通过创建一个空的 Vue 实例作为事件中心，不同组件可以通过它发送和接收消息。