Events with Data

import { LightningElement, api } from 'lwc';

export default class ContactListItem extends LightningElement {
    @api contact;

    handleClick(event) {
        // 1. Prevent default behavior of anchor tag click
        event.preventDefault();
        
        // 2. Create a custom event with data in the detail property
        const selectEvent = new CustomEvent('select', {
            detail: this.contact.Id
        });
        
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
}

<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>

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

export default class EventWithData extends LightningElement {
    selectedContact;

    @wire(getContactList) contacts;

    handleSelect(event) {
        // Access the data passed from the child via event.detail
        const contactId = event.detail;
        this.selectedContact = this.contacts.data.find(
            (contact) => contact.Id === contactId
        );
    }
}

<template>
    <lightning-card title="EventWithData" icon-name="standard:logging">
        <template lwc:if={contacts.data}>
            <lightning-layout class="slds-var-m-around_medium">
                <lightning-layout-item>
                    <!-- Each element must have a listener for non-bubbling events -->
                    <template for:each={contacts.data} for:item="contact">
                        <c-contact-list-item
                            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 lwc:if={selectedContact}>
                        <img src={selectedContact.Picture__c} alt="Profile photo" />
                        <p>{selectedContact.Name}</p>
                        <p>{selectedContact.Title}</p>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
        </template>
    </lightning-card>
</template>

const event = new CustomEvent('select', {
    detail: recordId  // Just the ID
});
this.dispatchEvent(event);

const event = new CustomEvent('update', {
    detail: {
        id: this.recordId,
        name: this.name,
        status: 'active'
    }
});
this.dispatchEvent(event);

const event = new CustomEvent('datachange', {
    detail: {
        record: this.record,
        changes: this.modifiedFields,
        metadata: {
            timestamp: Date.now(),
            user: this.currentUser
        }
    }
});
this.dispatchEvent(event);