文章目录
- 一、自定义事件概念及使用场景
- 二、代码解释
- 三、新的示例
一、自定义事件概念及使用场景
-
概念
在 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
从购物车商品列表中删除对应的商品。