Skip to main content

Komunikasi Parent - Child

Beberapa metode yang umum digunakan:

  1. Menggunakan Properties (@api decorator)
  2. Passing data melalui attributes
  3. Menggunakan Lightning Message Service (LMS)
  4. Menggunakan Event Bubbling

Mari kita bahas masing-masing metode ini secara lebih detail:

  1. Menggunakan Properties (@api decorator): Ini adalah cara paling umum dan sederhana untuk mengirim data dari parent ke child component. Child component mendefinisikan properti dengan @api decorator, yang membuatnya dapat diakses dari parent component.

  2. Passing data melalui attributes: Ketika Anda membuat instance child component di dalam parent component, Anda dapat meneruskan data sebagai atribut.

  3. Menggunakan 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.

  4. Menggunakan Event Bubbling: Meskipun ini lebih umum digunakan untuk komunikasi dari child ke parent, terkadang bisa digunakan untuk komunikasi dari parent ke child dengan memanfaatkan event yang di-dispatch oleh parent dan di-listen oleh child.

Mari saya buatkan contoh kode untuk metode pertama dan kedua, karena ini adalah yang paling sering digunakan dalam pengembangan Salesforce LWC sehari-hari.

Contoh​

Child Component​

<template>
    <div>
        <h2>Child Component</h2>
        <p>Message from parent: {message}</p>
    </div>
</template>
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api message;
}

Parent Component​

<template>
    <div>
        <h1>Parent Component</h1>
        <c-child-component 
            message={parentData}>
        </c-child-component>
    </div>
</template>
// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    parentData = 'Hello from parent!';
}

Dalam contoh di atas:

  1. Parent component (parentComponent) memiliki data parentData.
  2. Di template parent, kita membuat instance child component dan meneruskan parentData melalui atribut message.
  3. Child component (childComponent) mendefinisikan property message dengan @api decorator, membuatnya dapat menerima data dari parent.
  4. Di template child, kita menampilkan message yang diterima dari parent.

Ini adalah cara yang sangat umum dan efektif untuk mengirim data dari parent ke child component dalam Salesforce LWC. Metode ini memungkinkan parent untuk mengontrol data yang dikirim ke child, dan child dapat bereaksi terhadap perubahan data tersebut.

Penting untuk diingat bahwa properties yang ditandai dengan @api bersifat read-only di dalam child component. Jika Anda perlu memodifikasi data tersebut, sebaiknya buat salinan lokalnya di child component.

Memanggil Fn di Child Component​

Parent component dapat memanggil method yang didefinisikan di kontroler child component. Ini adalah salah satu cara lain untuk komunikasi antara parent dan child component. Untuk melakukan ini, kita menggunakan kombinasi dari @api decorator di child component dan referensi template di parent component.

Cara ini tidak disarankan dan harus dipakai dalam kondisi di mana nggak ada cara lain yang lebih baik.

Langkah-langkahnya :

  1. Definisikan method di child component dengan @api decorator.
  2. Gunakan referensi template di parent component untuk mendapatkan instance child component.
  3. Panggil method child dari parent component.

Contoh​

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

export default class ChildComponent extends LightningElement {
    @api
    childMethod(param) {
        console.log('Child method called with parameter:', param);
        // Lakukan sesuatu dengan parameter
        return `Processed: ${param}`;
    }
}
<!-- childComponent.html -->
<template>
    <div>
        <h2>Child Component</h2>
    </div>
</template>
// parentComponent.js
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    callChildMethod() {
        // buat referensi ke child component
        const childCmp = this.template.querySelector('c-child-component');
        if (childCmp) {
            const result = childCmp.childMethod('Hello from parent');
            console.log('Result from child method:', result);
        }
    }
}
<template>
    <div>
        <h1>Parent Component</h1>
        <c-child-component></c-child-component>
        <lightning-button 
            label="Call Child Method" 
            onclick={callChildMethod}>
        </lightning-button>
    </div>
</template>

Penjelasan kode di atas:

  • Di childComponent.js, kita mendefinisikan method childMethod dengan @api decorator. Ini membuat method tersebut dapat diakses dari luar component.
  • Di parentComponent.js, kita membuat method callChildMethod. Di dalam method ini:
    • Kita menggunakan this.template.querySelector('c-child-component') untuk mendapatkan referensi ke instance child component.
    • Kita memeriksa apakah child component ditemukan (untuk menghindari error).
    • Jika ditemukan, kita memanggil childMethod pada child component dan meneruskan parameter.
  • Di parentComponent.html, kita menambahkan sebuah button yang akan memanggil callChildMethod ketika diklik.

Beberapa hal penting yang perlu diperhatikan:

  • Method yang ingin dipanggil dari parent harus ditandai dengan @api decorator di child component.
  • Pastikan child component sudah di-render sebelum mencoba memanggil methodnya. Dalam contoh di atas, kita menggunakan button untuk memastikan ini, tapi dalam skenario lain, Anda mungkin perlu menggunakan lifecycle hooks seperti renderedCallback().
  • Jika child component di-render secara kondisional, selalu periksa apakah referensi child component ada sebelum memanggil methodnya.
  • Ingat bahwa ini menciptakan ketergantungan yang kuat antara parent dan child component, jadi gunakan dengan bijak dan pertimbangkan alternatif seperti event jika memungkinkan.

Memanggil method child dari parent bisa sangat berguna dalam situasi tertentu, seperti ketika Anda perlu memicu aksi spesifik di child component berdasarkan interaksi user di parent component. Namun, pastikan untuk menjaga separation of concerns dan tidak membuat komponen terlalu tightly coupled.