文章目录
- 一、自定义事件概念及使用场景
- 二、代码解释
- 三、新的示例
一、自定义事件概念及使用场景
-
概念
在 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>
在这个示例中，子组件ProductCard通过自定义事件delete - product将商品的id传递给父组件ShoppingCart，父组件根据id从购物车商品列表中删除对应的商品。
