【Vue】Vue3.0（十九）Vue 3.0 中一种组件间通信方式-自定义事件

文章目录

一、自定义事件概念及使用场景

概念
在 Vue 3.0 中，自定义事件是一种组件间通信的机制，允许子组件向父组件传递数据或触发父组件中的操作。子组件通过defineEmits函数定义可以触发的事件，父组件通过v-on（或@）指令监听子组件触发的这些自定义事件，并在事件处理函数中接收和处理数据。这种方式遵循了单向数据流的原则，同时实现了父子组件之间灵活的数据交互。
使用场景
- 用户交互反馈：例如在一个表单组件中，子组件（如输入框组件）可以在用户输入完成并提交时，通过自定义事件将用户输入的值传递给父组件，父组件再进行数据验证和后续处理。
- 状态更新通知：当子组件内部状态发生变化，且这个变化需要让父组件知晓并做出相应反应时，比如子组件中的某个任务完成状态改变，通过自定义事件通知父组件更新相关显示或执行其他操作。
- 动态数据传递：子组件根据自身逻辑生成一些数据，需要传递给父组件来更新父组件的视图或进行其他业务逻辑处理，如在一个动态列表组件中，子组件对列表项的操作结果传递给父组件。

二、代码解释

Child.vue 组件
- 模板部分：

<template>
  <div class="child">
    <h3>子组件</h3>
    <h4>玩具：{{ toy }}</h4>
    <button @click="emit('send - toy', toy)">测试</button>
  </div>
</template>

这里定义了一个按钮，当点击按钮时，会触发send - toy自定义事件，并将toy的值作为参数传递出去。

- **脚本部分**：

import { ref, onMounted } from "vue";
// 数据
let toy = ref('奥特曼');
// 声明事件
const emit = defineEmits(['send - toy']);
// //挂载3s之后触发事件
// onMounted(() => {
//   setTimeout(() => {
//     emit('send - toy');
//   }, 3000);
// });

  - 首先，使用`ref`创建了一个响应式数据`toy`，其初始值为`奥特曼`。
  - 然后，通过`defineEmits`定义了`send - toy`这个自定义事件，这使得子组件可以触发这个事件向父组件传递信息。注释部分代码原本是在组件挂载 3 秒后触发`send - toy`事件。

Father.vue 组件
- 模板部分：

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4 v - show="toy">子给的玩具：{{ toy }}</h4>
    <!-- 给子组件Child绑定事件 -->
    <Child @send - toy="saveToy" />
  </div>
</template>

这里在子组件Child标签上使用@send - toy监听了子组件触发的send - toy事件，并将事件处理函数绑定为saveToy。当子组件触发该事件时，父组件中的saveToy函数会被调用。

- **脚本部分**：

import Child from './Child.vue';
import { ref } from "vue";
// 数据
let toy = ref('');
// 用于保存传递过来的玩具
function saveToy(value: string) {
  console.log('saveToy', value);
  toy.value = value;
}

  - 首先，引入了子组件`Child`。
  - 接着，使用`ref`创建了一个响应式数据`toy`，初始值为空字符串。
  - 定义了`saveToy`函数，它接收子组件传递过来的值（这里是玩具名称的字符串），在函数内部，先在控制台打印接收到的值，然后将`toy`的值更新为接收到的值，这样就实现了子组件向父组件传递数据并更新父组件状态的功能。

这里给出一个整体的父子组件的代码概览，更有助于我们的理解
在这里插入图片描述

效果图：
未点击按钮之前：
在这里插入图片描述

点击按钮之后：
在这里插入图片描述

三、新的示例

假设我们有一个包含多个商品卡片的购物车组件，每个商品卡片是一个子组件，当点击商品卡片上的“删除”按钮时，需要通知父组件（购物车组件）从购物车中删除该商品。

子组件（ProductCard.vue）

<template>
  <div class="product - card">
    <img :src="product.image" alt="Product Image">
    <h4>{{ product.name }}</h4>
    <p>Price: ${{ product.price }}</p>
    <button @click="emit('delete - product', product.id)">删除</button>
  </div>
</template>

<script setup lang="ts" name="ProductCard">
import { defineEmits } from "vue";
import { product } from './productData'; // 假设这里有商品数据

const emit = defineEmits(['delete - product']);
</script>

<style scoped>
.product - card {
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  text - align: center;
}
</style>

父组件（ShoppingCart.vue）

<template>
  <div class="shopping - cart">
    <h2>购物车</h2>
    <div v - for="(product, index) in cartProducts" :key="index">
      <ProductCard :product="product" @delete - product="removeProduct" />
    </div>
  </div>
</template>

<script setup lang="ts" name="ShoppingCart">
import ProductCard from './ProductCard.vue';
import { ref } from "vue";
import { products } from './productData'; // 假设这里有商品数据列表

const cartProducts = ref([...products]); // 模拟购物车中的商品列表

const removeProduct = (productId: number) => {
  const updatedCart = cartProducts.value.filter((product) => product.id!== productId);
  cartProducts.value = updatedCart;
};
</script>

<style scoped>
.shopping - cart {
  background - color: lightgray;
  padding: 20px;
}
</style>