Salesforce学习 Lwc（七）【DispatchEvent】事件之间相互调用

原创

repick

修改于 2020-12-30 11:08:24

1.4K00

代码可运行

文章被收录于专栏：SalesforceSalesforce

运行总次数：0

代码可运行

1. 如何创建DispatchEvent事件

在javaScript中可以使用CustomEvent()方法进行两个lwc之间事件的跳转，在跳转的地方调用EventTarget.dispatchEvent()方法。但是在构造方法CustomEvent()里边必须指定一个字符串，用于跳转时的识别文字。

this.dispatchEvent(new CustomEvent('xxxx'))

字符串命名标准：

No uppercase letters
No spaces
Use underscores to separate words

例：

helloWebComponentPaginator.html

<template>
    <lightning-layout>
        <lightning-layout-item>
            <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item flexibility="grow"></lightning-layout-item>
        <lightning-layout-item>
            <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler}></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

import { LightningElement } from 'lwc';
export default class HelloWebComponentPaginator extends LightningElement {
    previousHandler() {
        this.dispatchEvent(new CustomEvent('previous'));
    }
    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
}

helloWebComponentEventSimple.html

<template>
  <lightning-card title="EventSimple" icon-name="custom:custom9">
      <div class="slds-m-around_medium">
            <p class="slds-m-vertical_medium content">Page {page}</p>
            <c-hello-web-component-paginator onprevious={previousHandler} onnext={nextHandler}></c-hello-web-component-paginator>
      </div>
  </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class HelloWebComponentEventSimple extends LightningElement {
  page = 1;
    previousHandler() {
        if (this.page > 1) {
            this.page = this.page - 1;
        }
    }
    nextHandler() {
        this.page = this.page + 1;
    }
}

c-paginator {
  border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
  border-radius: var(--lwc-borderRadiusMedium, 4px);
  padding: var(--lwc-varSpacingXSmall, 8px) var(--lwc-varSpacingXxxSmall, 2px)
      var(--lwc-varSpacingXxxSmall, 2px) var(--lwc-varSpacingXxxSmall, 2px);
}

c-paginator:before {
  content: 'c-paginator';
  color: rgb(221, 219, 218);
  position: absolute;
  top: -10px;
  left: var(--lwc-varSpacingXxSmall, 4px);
  background-color: var(--lwc-colorBackgroundAlt, #ffffff);
  padding: 0 var(--lwc-varSpacingXxSmall, 4px);
}

效果展示：

2.如何传递参数

事件之间用detail属性可以传递参数，格式如下：

dispatchEvent(new CustomEvent('searchaccount',
                { detail: { 参数1: 值,
                            参数2: 值
                }));

例：

contactListItem.html

<template>
    <a href="#" onclick={handleClick}>
        <lightning-layout vertical-align="center">
            <lightning-layout-item>
                <img src={contact.Picture__c} alt="Profile photo" />
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <p>{contact.Name}</p>
            </lightning-layout-item>
        </lightning-layout>
    </a>
</template>

contactListItem.js

点击姓名url事件，把ContactId作为参数，传递到Lwc【eventWithData】中，进行详细查询。

import { LightningElement, api } from 'lwc';
export default class ContactListItem extends LightningElement {
    @api contact;
    handleClick(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        event.preventDefault();
        const selectEvent = new CustomEvent('select', {
            detail: this.contact.Id
        });
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
}

contactListItem.css

img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

eventWithData.html

<template>
    <lightning-card title="EventWithData" icon-name="standard:logging">
        <template if:true={contacts.data}>
            <lightning-layout class="slds-var-m-around_medium">
                <lightning-layout-item>
                    <!-- c-contact-list-item emits a non-bubbling event so each element must have a listener-->
                    <template for:each={contacts.data} for:item="contact">
                        <c-contact-list-item
                            class="slds-show slds-is-relative"
                            key={contact.Id}
                            contact={contact}
                            onselect={handleSelect}
                        ></c-contact-list-item>
                    </template>
                </lightning-layout-item>
                <lightning-layout-item class="slds-var-m-left_medium">
                    <template if:true={selectedContact}>
                        <img
                            src={selectedContact.Picture__c}
                            alt="Profile photo"
                        />
                        <p>{selectedContact.Name}</p>
                        <p>{selectedContact.Title}</p>
                        <p>
                            <lightning-formatted-phone
                                value={selectedContact.Phone}
                            ></lightning-formatted-phone>
                        </p>
                        <p>
                            <lightning-formatted-email
                                value={selectedContact.Email}
                            ></lightning-formatted-email>
                        </p>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
        </template>
        <template if:true={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        </template>
        <!-- <c-view-source source="lwc/eventWithData" slot="footer">
            Child-to-parent communication using a custom event that passes data
            to the parent component. Click an item in the list to see the recipe
            in action.
        </c-view-source> -->
    </lightning-card>
</template>

eventWithData.js

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class EventWithData extends LightningElement {
    selectedContact;

    @wire(getContactList) contacts;

    handleSelect(event) {
        const contactId = event.detail;
        this.selectedContact = this.contacts.data.find(
            (contact) => contact.Id === contactId
        );
    }
}

eventWithData.css

img {
    width: var(--lwc-squareIconLargeBoundaryAlt, 80px);
    height: var(--lwc-squareIconLargeBoundaryAlt, 80px);
    border-radius: var(--lwc-borderRadiusCircle, 50%);
    margin-bottom: var(--lwc-varSpacingXSmall, 8px);
}

c-contact-list-item {
    border: solid var(--lwc-borderWidthThin, 1px) #ecebea;
    border-radius: var(--lwc-borderRadiusMedium, 4px);
    margin: var(--lwc-borderWidthThin, 1px) 0;
    padding: 3px var(--lwc-varSpacingXxxSmall, 2px) 0
        var(--lwc-varSpacingXxxSmall, 2px);
}

c-contact-list-item:before {
    content: 'c-contact-list-item';
    color: rgb(221, 219, 218);
    position: absolute;
    top: -9px;
    left: var(--lwc-varSpacingXxSmall, 4px);
    background-color: var(--lwc-colorBackgroundAlt, #ffffff);
    padding: 0 var(--lwc-varSpacingXxSmall, 4px);
}

效果展示：