Salesforce LWC 文档 —— 事件

事件概述

事件是组件之间通信的一种方式。当组件发生某种变化时，它可以调度一个事件，然后其他组件可以监听该事件并做出相应的反应。这是一种非常灵活且强大的通信方式，可以用于各种各样的场景。

调度事件

要调度事件，您可以在组件中使用 dispatchEvent 方法。此方法接受一个事件对象作为参数，该对象包含有关事件的详细信息。事件对象可以是标准 DOM 事件对象，也可以是自定义事件对象。

以下是如何调度标准 DOM 事件的示例：

this.dispatchEvent(new CustomEvent('click'));

以下是如何调度自定义事件的示例：

this.dispatchEvent(new CustomEvent('my-custom-event', {
  detail: {
    data: 'This is some data'
  }
}));

监听事件

要监听事件，您可以在组件中使用 addEventListener 方法。此方法接受三个参数：事件类型、事件处理程序和可选的捕获标志。

以下是如何监听标准 DOM 事件的示例：

this.addEventListener('click', function(event) {
  // Do something
});

以下是如何监听自定义事件的示例：

this.addEventListener('my-custom-event', function(event) {
  // Do something with event.detail.data
});

事件冒泡

当组件调度事件时，该事件会从该组件冒泡到其父组件，依此类推，直到到达根组件。这允许您在父组件中监听子组件发出的事件。

以下是如何在父组件中监听子组件发出的事件的示例：

this.addEventListener('my-custom-event', function(event) {
  // Do something with event.detail.data
});

事件监听器和事件处理程序

事件监听器是您在组件中定义的函数，用于监听特定类型的事件。事件处理程序是您在事件监听器中定义的函数，用于处理该事件。

以下是如何定义事件监听器和事件处理程序的示例：

this.addEventListener('click', function(event) {
  // Do something
});

在上面的示例中，this.addEventListener('click', ...) 是事件监听器，而 function(event) { ... } 是事件处理程序。

最佳实践

以下是使用 LWC 中事件的一些最佳实践：

• 仅调度您需要调度