在不相关的组件之间通信

要在DOM中的子树之间通信（以及在某些情况下，登录到同一组织的不同浏览器窗口之间的通信），请使用闪电消息服务（LMS）。LMS是一项发布和订阅服务，可促进Lightning Web组件，Aura组件和Visualforce页面之间的通信。

除非您同时控制两个组件和一个公共父组件，否则请使用LMS进行不相关组件之间的通信。LMS功能强大，有效且易于使用，但不要在不必要时诱使您使用它。触发DOM事件效率更高。当您需要与无法控制的父级（例如两个App Builder插槽）在组件之间进行通信时，Lightning消息服务是理想的选择。

LMS通信图显示了一个文档对象，该对象包含多个元素，包括父元素中的一个元素。 LMS通道由元素之间的单向和双向箭头表示。

第三个业务部门希望参与号码处理项目。他们需要“优先计数”和“计数”在自己的组件中在一起，以便可以在需要的地方显示它们。让我们从创建消息通道开始，以便为组件使用做好准备。

名为remoteControl的组件将信息发送到不相关的名为counts的组件。

创建闪电消息通道

在Visual Studio Code的默认文件夹中，创建一个名为的文件夹 messageChannels。
在messageChannels文件夹中，创建一个名为的文件 Count_Updated.messageChannel-meta.xml。

在Count_Updated.messageChannel-meta.xml中，粘贴以下代码：

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>CountUpdated</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass Count updates</description>
     <lightningMessageFields>
        <fieldName>operator</fieldName>
        <description>This is the operator type of the manipulation</description>
    </lightningMessageFields>
    <lightningMessageFields>
         <fieldName>constant</fieldName>
        <description>This is the number for the manipulation</description>
     </lightningMessageFields>
</LightningMessageChannel>

保存并部署文件。

创建发布者组件

创建名为的Lightning Web组件remoteControl。

用以下代码替换remoteControl.js的内容：

import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
  
export default class RemoteControl extends LightningElement {
  
  @wire(MessageContext)
  messageContext;
  
  handleIncrement() {
    // this.counter++;
    const payload = { 
      operator: 'add',
      constant: 1
    };
  
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
  
  handleDecrement() {
    // this.counter--;
    const payload = { 
      operator: 'subtract',
      constant: 1
    };
  
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
  
  handleMultiply(event) {
    const factor = event.detail;
     // this.counter *= factor;
    const payload = { 
      operator: 'multiply',
      constant: factor
    };
  
    publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
  }
}

我们进口publish和MessageContext从闪电消息服务。我们还导入刚刚创建的频道（Count_Updated__c）。数据有效载荷与该publish功能一起发送。

保存文件。

打开remoteControl.html并在template 标签之间添加以下代码：

  <lightning-card title="Remote Control" icon-name="action:change_record_type">
    <c-controls
      class="slds-show slds-is-relative"
      onadd={handleIncrement}
      onsubtract={handleDecrement}
      onmultiply={handleMultiply}>
    </c-controls>
  </lightning-card>

注意，我们正在重新使用控件组件。

保存文件。

更新remoteControl.js-meta.xml，以使remoteControl组件在Lightning应用程序页面上可用：

    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>

保存文件。

创建订户组件

创建名为的Lightning Web组件counts。

用以下代码替换counts.js的内容：

import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
  
export default class Counts extends LightningElement {
  subscription = null;
  priorCount = 0;
  counter = 0;
  
  @wire(MessageContext)
  messageContext;
  
  subscribeToMessageChannel() {
    this.subscription = subscribe(
      this.messageContext,
      COUNT_UPDATED_CHANNEL,
      (message) => this.handleMessage(message)
    );
  }
  
  handleMessage(message) {
    this.priorCount = this.counter;
    if(message.operator == 'add') {
      this.counter += message.constant;
    }else if(message.operator == 'subtract') {
      this.counter -= message.constant;
    } else {
      this.counter *= message.constant;
    }
  }
  
  connectedCallback() {
    this.subscribeToMessageChannel();
  }
}

@wire(MessageContext)确保unsubscribe在组件销毁生命周期内运行。

保存文件。

打开counts.html并在template标签之间添加以下代码：

  <lightning-card title="Counts" icon-name="action:change_record_type">
    <p class="slds-text-align_center slds-var-m-vertical_medium">
      Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
    </p>
    <p class="slds-text-align_center slds-var-m-vertical_medium">
      Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
    </p>
  </lightning-card>

保存文件。

更新counts.js-meta.xml，以使计数组件在Lightning应用程序页面中可用：

    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>

保存文件。

将新组件添加到Event Comms App

部署lwc文件夹，然后刷新Event Comms应用程序页面。
打开事件通讯页面进行编辑。
将remoteControl组件拖到页面的右侧区域。
将counts组件拖到remoteControl组件下方的右侧区域。
单击“保存”，然后退出Lightning App Builder。

验证通讯

单击远程控制中的按钮以更改计数组件中的计数。

您也可以使用Lightning消息服务与Aura组件和Visualforce页面进行通信。这是使不同类型的组件保持同步的最干净的方法。

现在，您已经掌握了有关如何在Lightning Web组件之间进行通信的知识。您研究了子对父，父子对以及不相关的组件方案。确保检查资源以了解有关与Lightning Web组件通信的更多信息。

在不相关的组件之间通信

创建闪电消息通道

创建发布者组件

创建订户组件

将新组件添加到Event Comms App

你可能也会喜欢...

在闪电Web组件之间通信 – 从孩子到父母沟通

在闪电Web组件之间通信 – 父母与孩子沟通