原创 Sailing 2024-12-13 08:31 重庆
点击关注公众号，“技术干货”及时达！
❝引言：前端组件之间的通信非常重要，也相对简单。然而，在组件间嵌套关系复杂、逻辑复杂时，我们该如何快速、安全地开发出新需求呢？
❞
最近，我在开发团队监控项目时，发现上面引言中情况，我意识如果继续下去，开发时间会很长，风险也很大。但是，后续我发现了一项极具实用性的技术——「CustomEvent」。这一方法不仅提供了灵活的事件推送机制，还能让我们在复杂场景中独立于项目代码，实现高效的通知推送。
通过简单的几行代码，我们能够轻松创建和触发自定义事件，从而降低特殊场景下的开发风险，并且提升我们的开发效率。而且它可以非常容易的写到 React 和 Vue 项目中，这里和大家做一下分享。希望对你有所帮助！有所借鉴！
??实现过程（千万不要错过，超级简单 case）
让我们快速上手，看看如何利用 CustomEvent 构建一个全局广播推送消息的机制：
// 创建并触发自定义事件
const customEvent = new CustomEvent('yourEventName', {
detail: { key: 'myKey', value: 'newValue'} // 自定义数据
});
window.dispatchEvent(customEvent); // 推送消息
接下来，我们需要设置接收端：
// 监听自定义事件
window.addEventListener('yourEventName', (event) => {
const { key, value } = event.detail;
if (key === 'myKey') {
console.log('Detected localStorage change:', value);
}
});
通过以上代码，你已经实现了一个简洁高效的广播消息通知机制，这将大大简化组件间及跨组件间的通信。更令人兴奋的是，这种方式不仅限于内部通信，它还可以用于扩展原生事件，达到全局共享的效果！
语法细节 ??
CustomEvent 是 JavaScript 中专门用于创建和触发自定义事件的构造函数，让我们可以在网页上定义自己的事件，并携带一些自定义数据与事件监听器进行交互。具体来说：
const event = new CustomEvent(eventType, eventInit);
「eventType」：事件名称（字符串）。
「eventInit」（可选）：一个对象，包含与事件相关的属性。
「detail」：传递给事件监听器的自定义数据。
「bubbles」：事件是否应该冒泡（默认为 false）。
「cancelable」：事件是否可以被取消（默认为 false）。
适用场景 ??
「组件间与跨组件间的通信」：无论你是在使用 React 还是 Vue，这种方式都能有效提高组件间的解耦性。通过 CustomEvent，组件可以独立工作，减少对其他组件的依赖。
「扩展 JS 原生事件」：通过 CustomEvent，我们能够封装浏览器的原生事件，实现全局共享的功能。
其他场景待发现。。。
?1、Vue 组件之间进行通信
例如，假设我们有一个 「UserProfile」 组件和一个 「Notification」 组件。当用户在 「UserProfile」 中更新名字时，我们希望通过 「Notification」 显示一条消息。
UserProfile.vue
<template>
<div>
<input v-model="username" @input="updateUser" placeholder="Enter your name" />
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
methods: {
updateUser() {
// 创建并触发自定义事件
const customEvent = new CustomEvent('userUpdated', {
detail: { name: this.username },
});
window.dispatchEvent(customEvent);
},
},
};
</script>
Notification.vue
<template>
<div v-if="message">{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: '',
};
},
mounted() {
window.addEventListener('userUpdated', (event) => {
const { name } = event.detail;
this.message = `User name has been changed to ${name}`;
});
},
beforeDestroy() {
window.removeEventListener('userUpdated', this.eventListener);
},
};
</script>
将这两个组件放在你的 Vue 应用中，当 「UserProfile」 组件中的输入框内容改变时，将触发自定义事件，「Notification」 组件将接收并显示通知。
?2、React 组件之间进行通信
例如，假设我们有一个 「UserProfile」 组件和一个 「Notification」 组件。当用户在 「UserProfile」 中更新名字时，我们希望通过 「Notification」 显示一条消息。
UserProfile.jsx
import React, { useState } from 'react';
const UserProfile = () => {
const [username, setUsername] = useState('');
const updateUser = (e) => {
const newName = e.target.value;
setUsername(newName);
// 创建并触发自定义事件
const customEvent = new CustomEvent('userUpdated', {
detail: { name: newName },
});
window.dispatchEvent(customEvent);
};
return (
<div>
<input value={username} onChange={updateUser} placeholder="Enter your name" />
</div>
);
};
export default UserProfile;
Notification.jsx
import React, { useEffect, useState } from 'react';
const Notification = () => {
const [message, setMessage] = useState('');
useEffect(() => {
const eventListener = (event) => {
const { name } = event.detail;
setMessage(`User name has been changed to ${name}`);
};
window.addEventListener('userUpdated', eventListener);
return () => {
window.removeEventListener('userUpdated', eventListener);
};
}, []);
return <div>{message}</div>;
};
export default Notification;
最后的思考 ??
尽管 CustomEvent 具备快速和简单的特性，在开发中我们仍然应该优先考虑使用 React 和 Vue 等框架自带的通信方式，因为这能更好地管理和维护代码。然而，在面对复杂场景、时间紧迫的情况下，CustomEvent 无疑是一个降低风险、提升效率的理想选择。
如果你对 CustomEvent 有任何疑问或想法，欢迎分享你的见解。
点击关注公众号，“技术干货” 及时达！
