Salesforce跨组件通信之CustomEvent()

效果图

组件1

lwc1.html

<template>
    <div class="box1 box2">
        <div >
            <lightning-input type="text" variant="label-hidden" label="send massage" value={msg} onchange={msgchange} placeholder="Type here....."  message-when-value-missing=" "></lightning-input>
        </div>
        <div>
            <lightning-button label="发信息" title="Non-primary action" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
        </div>
    </div>
</template>

lwc1.js

import { LightningElement, track } from 'lwc';

export default class Lwc1 extends LightningElement {
    @track
    msg = ''

    msgchange(event) { 
        this.msg = event.detail.value;
    }

    handleClick() { 
        window.dispatchEvent(new CustomEvent('passmsg', {
            detail: {
                msg: this.msg,
                sendDate : this.getCurrentTime()
            }
        }))
    }

    getCurrentTime() {
        var date = new Date();//当前时间
        var month = this.zeroFill(date.getMonth() + 1);//月
        var day = this.zeroFill(date.getDate());//日
        var hour = this.zeroFill(date.getHours());//时
        var minute = this.zeroFill(date.getMinutes());//分
        var second = this.zeroFill(date.getSeconds());//秒
        var curTime = date.getFullYear() + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
        return curTime;
    }

    zeroFill(i){
        if (i >= 0 && i <= 9) {
            return "0" + i;
        } else {
            return i;
        }
    }
}

组件2

lwc2.html

<template>
    <div>
        <section role="log" class="slds-chat">
            <ul for:each={msgList} class="slds-chat-list"  for:item="msg" key={msg.id}>
                <li class="slds-chat-listitem slds-chat-listitem_event">
                    <div class="slds-chat-event">
                        <div class="slds-chat-event__body">
                            <span
                                class="slds-icon_container slds-icon-utility-priority slds-chat-icon"
                            >
                                <svg
                                    class="slds-icon slds-icon_x-small slds-icon-text-default"
                                    aria-hidden="true"
                                >
                                    <use
                                        xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#priority"
                                    ></use>
                                </svg>
                            </span>
                            <p>
                                <b>{msg.msg}</b> receive msg at {msg.sendDate}
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

lwc2.js

import { LightningElement, track, api, wire } from 'lwc'
export default class Lwc2 extends LightningElement {

    @track msgList = [];

    @track indexId = 0;
    connectedCallback() {
        window.addEventListener('passmsg', this.handleMessage, false);
    }

    handleMessage = (event) => {
        let msg = event.detail.msg;
        let sendDate = event.detail.sendDate;
        if (event.detail.msg) { 
            let obj = {
                id: this.index++,
                msg,
                sendDate
            }
            console.log(obj)
            this.msgList.push(obj)
            console.log(this.msgList)
        }
    }
}   

主组件

<template>
    <div class="div1" >
        <div>
            <c-lwc1></c-lwc1>
        </div>

        <div>
            <c-lwc2></c-lwc2>
        </div>
    </div>
</template>

主要就是利用了在Window对象上监听了自定义的事件