事件系统概述 - 在React和Vue中创建自定义事件指南✨

2023-12-20 07:03:16

打破代码壁垒，畅通数据交流：自定义事件的艺术

在前端开发中，组件间的通信是构建复杂应用的关键。随着应用规模的增长，组件之间的依赖关系也会变得错综复杂，这时就需要一种灵活而高效的通信机制来协调组件之间的交互。自定义事件便是这种机制的典范，它允许组件互相发送和接收消息，从而实现解耦和代码重用。

自定义事件的使用场景十分广泛，从简单的状态更新到复杂的组件间数据传递，皆可得心应手。例如，在构建一个购物车系统时，您可以使用自定义事件来通知购物车组件商品数量的变化，或者在用户点击按钮时触发一个事件来更新商品列表。

踏入React和Vue的自定义事件之旅：编写第一步

在React和Vue中实现自定义事件非常简单，只需按照以下步骤即可：

创建事件： 在组件中定义一个事件名称，并使用dispatchEvent()方法触发它。
监听事件： 在其他组件中，使用addEventListener()方法监听该事件。
处理事件： 当事件被触发时，监听器中的处理函数将被调用。

下面是React和Vue中自定义事件的具体示例：

React：

// 定义事件名称
const eventName = 'myCustomEvent';

// 创建事件
const dispatchEvent = () => {
  const event = new CustomEvent(eventName, { detail: { message: 'Hello from React!' } });
  document.dispatchEvent(event);
};

// 监听事件
const MyComponent = () => {
  const handleEvent = (event) => {
    console.log(event.detail.message); // "Hello from React!"
  };

  useEffect(() => {
    document.addEventListener(eventName, handleEvent);
    return () => {
      document.removeEventListener(eventName, handleEvent);
    };
  }, []);

  return (
    <button onClick={dispatchEvent}>Trigger Event</button>
  );
};

Vue：

// 定义事件名称
const eventName = 'myCustomEvent';

// 创建事件
const dispatchEvent = () => {
  this.$emit(eventName, { message: 'Hello from Vue!' });
};

// 监听事件
const MyComponent = {
  methods: {
    handleEvent(event) {
      console.log(event.message); // "Hello from Vue!"
    },
  },
  mounted() {
    this.$on(eventName, this.handleEvent);
  },
  beforeDestroy() {
    this.$off(eventName, this.handleEvent);
  },
  template: `
    <button @click="dispatchEvent">Trigger Event</button>
  `,
};

事件总线模式：解耦组件，重用代码的利器

事件总线模式是一种使用中央事件处理器来管理组件之间通信的模式。事件总线充当一个中介，组件可以向它发送和接收事件，而无需直接相互依赖。这种模式可以极大地提高代码的可维护性和灵活性，并简化组件之间的通信。

在React和Vue中，可以使用第三方库或自行实现事件总线。下面是一个使用Vue实现事件总线的示例：

// 事件总线类
class EventBus {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter((fn) => fn !== callback);
    }
  }

  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((callback) => callback(data));
    }
  }
}

// 创建事件总线实例
const eventBus = new EventBus();

// 使用事件总线
const MyComponent = {
  methods: {
    handleEvent(event) {
      console.log(event.message); // "Hello from Vue!"
    },
  },
  mounted() {
    eventBus.on('myCustomEvent', this.handleEvent);
  },
  beforeDestroy() {
    eventBus.off('myCustomEvent', this.handleEvent);
  },
  template: `
    <button @click="dispatchEvent">Trigger Event</button>
  `,
};