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

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

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

创建闪电消息通道

1. 在Visual Studio Code的默认文件夹中，创建一个名为的文件夹 messageChannels。
2. 在messageChannels文件夹中，创建一个名为的文件 Count_Updated.messageChannel-meta.xml。
3. 在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>
4. 保存并部署文件。

创建发布者组件

1. 创建名为的Lightning Web组件remoteControl。
2. 用以下代码替换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功能一起发送。

3. 保存文件。
4. 打开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>

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

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

       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
7. 保存文件。

创建订户组件

1. 创建名为的Lightning Web组件counts。
2. 用以下代码替换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在组件销毁生命周期内运行。

3. 保存文件。
4. 打开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>
5. 保存文件。
6. 更新counts.js-meta.xml，以使计数组件在Lightning应用程序页面中可用：

       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
7. 保存文件。

将新组件添加到Event Comms App

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

验证通讯

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

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

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

为了启用从父组件到子组件的通信，子组件公开一个属性或函数以使其公开。然后，父母可以更新孩子的公共财产或调用孩子的公共职能。

此外，如果要添加一些功能，请在子组件上将public属性更新为getter和setter。

让我们从简单的公共属性更新开始。另一个业务部门找到了您构建的分子。他们想使用它并添加到它。他们的第一个要求是能够设置计数器的起始编号。我们不想进行任何会影响原始业务用例的更改，因此让我们将分子组件包装在另一个组件中，该组件将拥有新功能。 

更新公共财产

@api子组件中的装饰器公开一个属性，使其公开，以便父组件可以对其进行更新。

1. 在子组件（分子）中公开一个公共属性：
   1. 在Visual Studio Code中，打开numerator.js并将@api 装饰器应用于counter属性：

        @api counter = 0;
   2. api从lwc模块导入装饰器。
   3. 保存文件。
2. 创建并编写一个名为的新父组件augmentor：
   1. 创建名为的Lightning Web组件augmentor。
   2. 在extraor.js中，将此代码粘贴到Augmentor类中：

        startCounter = 0;
        
        handleStartChange(event) {
          this.startCounter = parseInt(event.target.value);
        }
   3. 保存文件。
   4. 打开exporor.html，并在template标签之间添加以下代码 ：

        <lightning-card title="Augmentor" icon-name="action:download">
          <lightning-layout>
            <lightning-layout-item flexibility="auto" padding="around-small">
              <lightning-input
                label="Set Starting Counter"
                type="number"
                min="0"
                max="1000000"
                value={startCounter}
                onchange={handleStartChange}>
              </lightning-input>
            </lightning-layout-item>
          </lightning-layout>
          <c-numerator
            class="slds-show slds-is-relative"
            counter={startCounter}>
          </c-numerator>
        </lightning-card>
   5. 保存文件。
   6. 更新exporor.js-meta.xml，以在Lightning应用程序页面上使增强器组件可用：

          <isExposed>true</isExposed>
          <targets>
            <target>lightning__AppPage</target>
          </targets>
   7. 保存文件。
3. 将新组件（增强器）添加到Event Comms应用程序页面：
   1. 部署lwc文件夹，然后刷新Event Comms应用程序页面。
   2. 打开Event Comms应用页面进行编辑。
   3. 将扩充器组件拖到页面的中央区域。
   4. 单击“保存”，然后退出Lightning App Builder。
4. 验证通讯：
   1. 要查看Salesforce中的更改，请刷新Event Comms应用程序页面。
   2. 在设置起始计数器字段中输入数字。
      计数将更新为您输入的内容。
   3. 单击乘法按钮之一。
      请注意，计数器会更新，但“设置起始计数器”保持不变。
   4. 更改原始分子组件中的值。
      它继续按预期工作。

因为我们将“设置起始计数器”放在其自己的组件（增强器）中，所以没有将其添加到分子组件中，而是继续为原始业务案例提供服务。现在分子从子级（控件）和父级（增强器）接收输入。

调用公共功能

该业务的第二个请求是将总数增加一百万。他们不希望设置开始计数发生变化。这意味着我们不能只更新startCounter属性。我们也没有要添加的扩充器组件中的当前计数。我们将对孩子调用一个公共函数来为我们进行更新。

@api子组件中的装饰器公开一个函数，使其公开，以便父组件可以调用它。

1. 在子组件（分子）中创建一个公共函数：
   1. 打开numerator.js并将此maximizeCounter函数添加到该函数之后handleMultiply：

        @api
        maximizeCounter() {
          this.counter += 1000000;
        }
   2. 保存文件。
2. 在父组件（增强器）中，添加一个按钮及其处理程序：
   1. 打开exporor.js，并在handleMaximizeCounter 函数后添加以下handleStartChange函数：

        handleMaximizeCounter() {
          this.template.querySelector('c-numerator').maximizeCounter();
        }

      该函数c-numerator在exporor.html中找到标签并调用公共maximizeCounter函数。

   2. 保存文件。
   3. 打开exporor.html，并将其添加lightning-button到Set Starting Counter之后lightning-input：

              <lightning-button 
                class="slds-var-p-vertical_xx-small"
                label="Add 1m To Counter"
                onclick={handleMaximizeCounter}>
              </lightning-button>
   4. 保存文件。
3. 验证通讯：
   1. 要查看Salesforce中的更改，请部署lwc文件夹，然后刷新Event Comms应用程序页面。
   2. 单击“添加1m到计数器”。
      数量增加了一百万。

在父级（增强器）中，新按钮触发handleMaximizeCounter 处理程序，该处理程序调用子级组件（分子）并触发其公共 maximizeCounter功能。

使用公共Getter和Setter

此练习与在此步骤开始时更新属性的方式非常相似。实际上，我们根本不会更改父组件。在子组件中，我们仅使用公共获取器和设置器来实现公共柜台属性。

使用Event Comms的两个业务部门都喜欢更新。现在他们希望随着计数的变化看到计数的先前值。每当更改计数器属性时，我们都需要一种方法来捕获当前计数。在设置新值之前，我们可以获取当前计数并保存它。让我们使用一个名为的新私有变量，_currentCount以便我们可以使用它。为了保存先前的计数以便我们可以显示它，我们将使用一个名为的变量 priorCount。

对于其他功能，我们将该counter属性实现为getter和setter（get和set，也称为访问器属性）。然后，每次设置计数器时，我们都会在设置新的计数器值之前将当前计数器值（_currentCount）存储在priorCount变量中。

1. 向子组件（分子）添加一个先验计数：
   1. 打开numerator.html并将此段落添加到带有Count的段落之前：

            <p class="slds-text-align_center slds-var-m-vertical_medium">
              Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
            </p>
   2. 保存文件。
   3. 打开numerator.js并进行@api counter = 0;注释（添加//到该行的开头）。
   4. 在评论之后，添加以下代码：

        _currentCount = 0;
        priorCount = 0;
        
        @api
        get counter() {
          return this._currentCount;
        }
        set counter(value) {
          this.priorCount = this._currentCount;
          this._currentCount = value;
        }

      此代码counter使用getter（get）和setter（set）函数更改为属性。它还添加priorCount和 _currentCount属性。

   5. 保存文件。
2. 验证通讯：
   1. 要查看Salesforce中的更改，请部署lwc文件夹，然后刷新Event Comms应用程序页面。
   2. 单击“添加”，“ X2 ”和“向计数器添加1m” 以更改计数器值。
      更新计数器时，Prior Counter保持同步。
   3. 单击Numerator和Augmentor组件中的按钮以查看原始功能不受影响。

我们更新了分子组件，以使用getter和setter来更新新 priorCount属性。父组件（增强器）仍将信息（startCounter）发送到子组件（分子）。但现在，分子使用getter和setter来get的_currentCount财产，set 在_currentCount和priorCount属性。

挑战自己（可选-我们将不检查此代码）
更新handleMaximizeCounter并maximizeCounter接受一个参数，该参数指定要添加到计数中的数字。提示：回顾你在步骤1中所做的发送 data-factor与multiply自定义事件。

概要

您已经解决了Lightning Web组件之间的子对父和父子对子通信。在下一步中，您将使用Lightning消息服务在没有父子关系的组件之间进行通信。