Komunikasi Child - Parent

Metode

Beberapa cara komunikasi dari child component ke parent component:

1. Custom Events
2. Public Methods (@api)
3. Two-way Data Binding
4. Lightning Message Service (LMS)

Mari kita bahas masing-masing metode ini dengan contoh kode:

Custom Events

Ini adalah cara paling umum untuk berkomunikasi dari child ke parent. Child component membuat dan mengirim custom event, yang kemudian di-listen oleh parent.

<!-- childComponent.html -->
<template>
    <lightning-button label="Send to Parent" onclick={handleClick}></lightning-button>
</template>

// childComponent.js
import { LightningElement } from 'lwc';

export default class ChildComponent extends LightningElement {
    handleClick() {
        const event = new CustomEvent('childaction', {
            detail: { message: 'Hello from child!' }
        });
        this.dispatchEvent(event);
    }
}

// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    handleChildAction(event) {
        console.log('Received from child:', event.detail.message);
    }
}

<!-- parentComponent.html -->
<template>
    <!-- event 'childaction' callbacknya onchildaction -->
    <c-child-component 
        onchildaction={handleChildAction}></c-child-component>
</template>

Public Methods (@api)

Child component dapat mendefinisikan public method yang dapat dipanggil oleh parent. Parent kemudian dapat memanggil method ini untuk mendapatkan data atau memicu aksi di child.

// childComponent.js
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api
    getChildData() {
        return 'Data from child';
    }
}

// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    childData;

    handleClick() {
        this.childData = this.template.querySelector('c-child-component').getChildData();
    }
}

<!-- parentComponent.html -->
<template>
    <c-child-component></c-child-component>
    <lightning-button label="Get Child Data" onclick={handleClick}></lightning-button>
    <p if:true={childData}>Child Data: {childData}</p>
</template>

Two-way Data Binding

Meskipun LWC menggunakan one-way data binding secara default, kita bisa mencapai two-way binding dengan menggunakan kombinasi properties dan events.

// childComponent.js
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api value;

    handleChange(event) {
        this.dispatchEvent(new CustomEvent('valuechange', {
            detail: event.target.value
        }));
    }
}

<!-- child -->
<template>
    <lightning-input label="Input" value={value} onchange={handleChange}></lightning-input>
</template>

// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    inputValue = '';

    handleValueChange(event) {
        this.inputValue = event.detail;
    }
}

<!-- parent -->
<template>
    <c-child-component 
        value={inputValue} 
        onvaluechange={handleValueChange}>
    </c-child-component>
    <p>Current Value: {inputValue}</p>
</template>

Lightning Message Service (LMS)

LMS memungkinkan komunikasi antar komponen yang tidak memiliki hubungan langsung dalam hierarki DOM. Ini berguna untuk komunikasi antar komponen yang berada di tab atau halaman yang berbeda.

// messageChannel.js
import { createMessageChannel, MessageContext } from 'lightning/messageService';

export default createMessageChannel({
    messageName: 'SampleMessageChannel',
    description: 'Sample message channel for demonstration',
    isPublished: true,
});

// childComponent.js
import { LightningElement, wire } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLE_MESSAGE_CHANNEL from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class ChildComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;

    handleClick() {
        const message = {
            message: 'Hello from child via LMS!'
        };
        publish(this.messageContext, SAMPLE_MESSAGE_CHANNEL, message);
    }
}

<!-- child -->
<template>
    <lightning-button label="Send via LMS" onclick={handleClick}></lightning-button>
</template>

// parentComponent.js
import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import SAMPLE_MESSAGE_CHANNEL from '@salesforce/messageChannel/SampleMessageChannel__c';

export default class ParentComponent extends LightningElement {
    @wire(MessageContext)
    messageContext;

    connectedCallback() {
        this.subscribeToMessageChannel();
    }

    subscribeToMessageChannel() {
        subscribe(
            this.messageContext,
            SAMPLE_MESSAGE_CHANNEL,
            (message) => this.handleMessage(message)
        );
    }

    handleMessage(message) {
        console.log('Received message:', message.message);
    }
}

Kelebihan & Kekurangan

• Custom Events sangat berguna untuk komunikasi langsung antara child dan parent.
• Public Methods baik untuk ketika parent perlu mengakses data atau fungsi dari child.
• Two-way Data Binding berguna ketika Anda perlu menjaga sinkronisasi data antara parent dan child.
• Lightning Message Service sangat powerful untuk komunikasi antar komponen yang tidak memiliki hubungan langsung.

Pilihan metode tergantung pada kebutuhan spesifik aplikasi Anda dan hubungan antara komponen-komponen yang terlibat.