🤔🤔【前端通信新技能】使用 CustomEvent 是一个不错的选择！

引言：前端组件之间的通信非常重要，也相对简单。然而，在组件间嵌套关系复杂、逻辑复杂时，我们该如何快速、安全地开发出新需求呢？

最近，我在开发团队监控项目时，发现上面引言中情况，我意识如果继续下去，开发时间会很长，风险也很大。但是，后续我发现了一项极具实用性的技术------CustomEvent。这一方法不仅提供了灵活的事件推送机制，还能让我们在复杂场景中独立于项目代码，实现高效的通知推送。

通过简单的几行代码，我们能够轻松创建和触发自定义事件，从而降低特殊场景下的开发风险，并且提升我们的开发效率。而且它可以非常容易的写到 React 和 Vue 项目中，这里和大家做一下分享。希望对你有所帮助！有所借鉴！

🔥🔥实现过程（千万不要错过，超级简单 case）

让我们快速上手，看看如何利用 CustomEvent 构建一个全局广播推送消息的机制：

javascript 复制代码

// 创建并触发自定义事件
const customEvent = new CustomEvent('yourEventName', {  
  detail: { key: 'myKey', value: 'newValue'} // 自定义数据
}); 

window.dispatchEvent(customEvent); // 推送消息

接下来，我们需要设置接收端：

javascript 复制代码

// 监听自定义事件
window.addEventListener('yourEventName', (event) => {
  const { key, value } = event.detail;
  if (key === 'myKey') {
    console.log('Detected localStorage change:', value);
  }
});

通过以上代码，你已经实现了一个简洁高效的广播消息通知机制，这将大大简化组件间及跨组件间的通信。更令人兴奋的是，这种方式不仅限于内部通信，它还可以用于扩展原生事件，达到全局共享的效果！

语法细节 🎯🎯

CustomEvent 是 JavaScript 中专门用于创建和触发自定义事件的构造函数，让我们可以在网页上定义自己的事件，并携带一些自定义数据与事件监听器进行交互。具体来说：

js 复制代码

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

html 复制代码

<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

html 复制代码

<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

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

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 有任何疑问或想法，欢迎分享你的见解。