Vue3：自定义事件实现组件通信
目录
在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>
四.效果
原文地址：https://blog.csdn.net/qq_48597462/article/details/142387851
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！