目录
一.性质
1.双向通信
2.灵活性
3.传参能力
4.声明机制
5.事件验证
6.修饰符支持
7.响应式更新
8.解耦组件
9.易于测试
10.性能优化
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
2.子组件代码
四.效果
在Vue3中,自定义事件是实现组件间通信的一种重要方式,尤其在子组件向父组件传递数据的场景中发挥着关键作用。
一.性质
1.双向通信
自定义事件允许子组件通过$emit
方法向父组件发送消息,而父组件则可以通过监听这些事件来接收消息,从而实现父子组件之间的双向通信。
2.灵活性
自定义事件的名称可以是任意的,这使得开发者可以根据实际需求定义具有描述性的名称,提高了代码的可读性和可维护性。
3.传参能力
在触发自定义事件时,可以通过$emit
方法的第二个参数传递任意类型的数据,这为组件间的数据传递提供了极大的灵活性。
4.声明机制
在Vue3中,自定义事件需要在组件的emits
选项中进行声明,这有助于IDE和类型检查工具提供更好的支持,并确保事件的一致性和正确性。
5.事件验证
Vue3允许通过对象语法配置事件抛出验证,类似于props验证,这有助于在编译时捕获潜在的错误,提高应用的健壮性。
6.修饰符支持
Vue3中的自定义事件同样支持修饰符的使用,如.stop
、.prevent
等,这为事件处理提供了更多的控制手段。
7.响应式更新
当子组件的状态发生变化并通过自定义事件通知父组件时,父组件可以相应地更新自己的状态,保持视图与数据的一致性。
8.解耦组件
自定义事件使得子组件不需要直接修改父组件的状态,而是通过事件通知父组件进行状态更新,这有助于降低组件间的耦合度,提高代码的模块化水平。
9.易于测试
由于自定义事件的明确声明和参数传递,它们更容易被单元测试所模拟和验证,从而提高了测试的可行性和可靠性。
10.性能优化
在大型应用中,合理使用自定义事件可以避免不必要的计算和渲染,因为只有当事件被触发时,相关的逻辑才会执行,这对于性能优化是有益的。
二.使用
1.父组件
2.子组件
三.代码
1.父组件代码
<template><div class="father"><h4>父组件</h4><h4>子传过来的数据:{{ car }}</h4><son @send-car="saveCar"/></div>
</template><script setup lang="ts" name="father">import { ref } from "vue";import son from "../components/son.vue";let car = ref('')function saveCar(value:string){car.value = value}</script><style scoped>
.father{background-color: skyblue;
}
h4{margin-left: 20px;font-size: 20px;
}</style>
2.子组件代码
<template><div class="son"><h4>子组件</h4><h4>子的汽车:{{ car }}</h4><button @click="emit('send-car',car)">传输数据给父</button></div>
</template><script setup lang="ts" name="father">import { ref } from "vue";let car = ref('宝马')const emit = defineEmits(['send-car'])</script><style scoped>
.son{background-color: orange;
}
h4{margin-left: 20px;font-size: 20px;
}
button{width: 200px;height: 40px;font-size: 20px;margin-left: 20px;
}</style>