Salesforce知识点: LWC 组件通信全解析

原创

已于 2025-09-18 20:41:20 修改 · 480 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #Salesforce #LWC

于 2025-09-18 20:09:30 首次发布

Lightning Web Components (LWC) 组件通信全解析

在 Lightning Web Components (LWC) 开发中，组件间的有效通信是构建复杂应用的核心。LWC 采用组件化架构，每个组件都是独立封装的单元，组件间的通信需要遵循特定模式。本文将详细介绍 LWC 中四种主要的组件通信方式：事件机制、子传父、父传子以及兄弟组件间通信。

一、LWC 事件机制

事件是 LWC 中组件交互的基础，分为标准 DOM 事件和自定义事件两类。

1. 标准 DOM 事件

LWC 组件可以直接使用浏览器原生的 DOM 事件，如 click、change、input 等，通过模板绑定事件处理函数。

<!-- 模板中的事件绑定 -->
<template>
    <button onclick={handleClick}>点击按钮</button>
    <input type="text" onchange={handleInputChange} />
</template>

// 事件处理逻辑
import {
   
    LightningElement } from 'lwc';

export default class EventDemo extends LightningElement {
   
   
    handleClick(event) {
   
   
        console.log('按钮被点击', event.target);
    }
    
    handleInputChange(event) {
   
   
        console.log('输入值变化:', event.target.value);
    }
}

2. 自定义事件

当标准事件无法满足需求时，我们可以创建自定义事件，用于组件间传递特定数据。

// 创建并触发自定义事件
const customEvent = new CustomEvent('customeventname', {
   
   
    detail: {
   
    key: 'value', data: [1, 2, 3] }, // 传递的数据
    bubbles: false, // 是否冒泡
    composed: false // 是否穿过影子DOM边界
});

this.dispatchEvent(customEvent);

自定义事件有两个重要属性控制传播行为：

bubbles：设为 true 时事件会向上冒泡至父组件
composed：设为 true 时事件可以穿过影子 DOM 边界

二、子组件向父组件传递数据（子传父）

子组件向父组件传递数据是通过自定义事件实现的，这是 LWC 中最常见的通信模式之一。

实现步骤：

子组件创建并触发自定义事件

// childComponent.js
import {
   
    LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
   
   
    handleSubmit(