Salesforce Message Service 跨组件之间通信

1.创建MessageChannels,在default目录下新建文件夹messageChannels:

2.新建channel文件,命名规则:name+".messageChannel-meta.xml":

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <description>This is a callcenter Lightning Message Channel.</description>
    <isExposed>true</isExposed>
    <lightningMessageFields>
        <description>This is the record Id that changed</description>
        <fieldName>recordId</fieldName>
    </lightningMessageFields>
    <masterLabel>callCenterMessageChannel</masterLabel>
</LightningMessageChannel>

lightningMessageFields:配置传递参数

3.在LWC中publish Channel,import的channel是messagechannel中的name+"__c":

javascript 复制代码
import {LightningElement,api ,wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import CallCenterMessageChannel from '@salesforce/messageChannel/callCenterChannelName__c';

export default class CallCenterMessageService extends LightningElement {

    @api recordId
    @wire(MessageContext)
    messageContext;
    // 当组件加载时处理记录 ID
    async connectedCallback() {
        // console.log('Selected Record IDs: ', this.selectedIds);
        console.log('record Id: ', this.recordId);
        debugger
       
        this.handlePublish();
          

    }

    handlePublish(){
        // debugger
        // console.log('handlePublish--Selected Record IDs: ', JSON.stringify(this.selectedIds));
        const payload = { recordId:  this.recordId};
        publish(this.messageContext, CallCenterMessageChannel, payload);
    }

    closeQuickAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }


}

4.在aura中publish & 订阅事件:

publish代码:

javascript 复制代码
cmp:
 <lightning:messageChannel type="callCenterChannelName__c"
                              aura:id="callCenterMessageChannel"/>

js:
handlePublish: function (cmp, event, helper) {
        var payload = {
            recordId: cmp.get("v.recordId")
        };
        cmp.find("callCenterMessageChannel").publish(payload);
    }

订阅事件:

javascript 复制代码
cmp:
<lightning:messageChannel type="callCenterChannelName__c" onMessage="{!c.handleCallCenterChannel}" scope="APPLICATION"/>

js:
  handleCallCenterChannel: function (cmp, message, helper) {
        // debugger;
        console.log("订阅信息!!");
        if (message != null && message.getParam("recordId") != null) {
            console.log("recordId--->" + message.getParam("recordId"));
            cmp.set("v.recordId", message.getParam("recordId"));
            
        }
    }

5.visualforce page 中publish & 订阅:

javascript 复制代码
 function publishMC() {
        const message = {
        record: "a0WIm000000cDYrMAM"
        };
        sforce.one.publish(callCenter, message);
        }

        //订阅事件
        function subscribeMC() {
        if (!subscriptionToMC) {
        subscriptionToMC = sforce.one.subscribe(SAMPLEMC, displayMessage);
        }
        }
        //取消订阅事件
        function unsubscribeMC() {
        if (subscriptionToMC) {
        sforce.one.unsubscribe(subscriptionToMC);
        subscriptionToMC = null;
        }
    }
相关推荐
小羊没烦恼!12 分钟前
铁道部新客票系统设计(二)
开发语言·前端·数据库·python·oracle·c#·php
智能直播3 小时前
RK3518:1.5G 内存 + 8G 存储,如何跑起硬件编解码、Web、AI 识别、绿幕特效
前端·人工智能·5g
掘金酱4 小时前
【10.24 特别活动】AI 时代,程序员的新饭碗在哪里?
前端·人工智能·后端
excel4 小时前
多进程环境下使用 PM2 部署 Socket.IO:需要注意什么
前端
IT_陈寒4 小时前
Redis的原子性竟然失效了?记一次分布式锁翻车实录
前端·人工智能·后端
时间的情敌6 小时前
《回顾 2018 前端:Vue2 成熟期,Webpack4 发布,PWA 大火》
前端
Java后端的Ai之路6 小时前
前端技术Vue-09-webpack-vuejs-实战
前端·vue.js·webpack
LMT流氓兔6 小时前
第五单元——第4课:给工具参数加校验
java·前端·算法·ai·langchain
涛涛ing7 小时前
React Compiler正式“Rust化”:你项目里的Babel插件,正在被编译进打包器
前端
迷迭绿7 小时前
Cesium 轨迹回放播放器
前端·javascript·cesium