引言:前端组件之间的通信非常重要,也相对简单。然而,在组件间嵌套关系复杂、逻辑复杂时,我们该如何快速、安全地开发出新需求呢?
最近,我在开发团队监控项目时,发现上面引言中情况,我意识如果继续下去,开发时间会很长,风险也很大。但是,后续我发现了一项极具实用性的技术——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 有任何疑问或想法,欢迎分享你的见解。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20791,转载请注明出处。
评论0