Привіт! В цій статті я розповім про різницю передачі даних між компонентами в Lightning Web Components (LWC) та AURA. Ці дві технології використовують однакові способи комунікації між компонентами, але існує принципова різниця в їх використанні: розробник, який розробляв AURA компоненти, вперше зіткнувшись з LWC, може бути здивований. У нас на форумі вже є статті (Aura, LMS) з прикладами коду про те, як саме можна передавати дані між компонентами. Тому цього разу зосередьмося на відмінностях LWC vs AURA.
І так, в Lightning існує три способи комунікації між компонентами, як в AURA, так і в LWC:
1. Parent to Child
2. Child to Parent
3. Communication between not related components
Далі з’ясуємо різницю для кожного способу окремо та розберемо кожен з них детальніше. Сподіваюся, ця інформація буде корисною для вас.
Parent to Child
LWC реалізовано за допомогою Public properties та Public method.
AURA реалізовано за допомогою aura:attribute та aura:method.
У цих реалізаціях ми можемо на батьківському компоненті виконати наступні дії:
передати дані в дочірній компонент напряму в його публічну змінну;викликати його публічний метод.
Якщо подивитися на код, то він буде різний для LWC та AURA, але логіка залишається та сама.
То в чому ж тоді різниця? Якщо змінити дані в aura:attribute, то це буде працювати в обидва напрямки. Тобто, припустимо, ми передали дані в дочірній компонент і змінили їх вже там. Тоді ці зміни також будуть відображатися і на батьківському компоненті. Потім ми вирішуємо оновити ці дані, але уже на батьківському компоненті. В цьому випадку зміни також будуть відображатися і на дочірньому компоненті.
Але це так не працює в LWC з його Public properties. В LWC ми можемо побачити на дочірньому компоненті зміни, які були зроблені з даними на батьківському компоненті, але це не працює у зворотному порядку. Це пов’язано з тим, що property з декоратором @api є незмінною, тому при спробі змінити дані, в консолі браузера буде відображатись error. Щоб ми могли змінювати дані, які були передані в дочірній компонент, нам потрібно створити нову змінну і скопіювати туди дані. Наприклад, ми передали об’єкт в public property:
@api someObject;
someObjectData; // приватна змінна в дочірньому компоненті
// копіюємо об’єкт
this.someObjectData = JSON.parse(JSON.stringify(this.someObject ));
Далі ми вже можемо працювати з даними в змінній someObjectData.
Child to Parent
LWC реалізовано за допомогою Events.
AURA реалізовано за допомогою aura:attribute та aura:event.
В LWC данні від дочірнього компонента до батьківських компонентів ми можемо передавати лише за допомогою Events. Технічно, для цього ми можемо використовувати ще й LMS (Lightning Message Service), але це нераціонально, тому залишимо лише Events. На противагу до LWS, в AURA ми можемо використовувати не лише aura:event, що є аналогом Events в LWC, але й aura:attribute, про що я вже писав вище. Варто зауважити, що aura:attribute працює й для багаторівневої вкладеності компонентів.
Events як в AURA, так і в LWC працюють тільки для компонентів з однієї ієрархії. Якщо компоненти ніяк не пов’язані між собою, то використовуються вже інші інструменти. Про це я розповім далі.
Communication between not related components
LWC реалізовано за допомогою LMS (Lightning message service) .
AURA реалізовано за допомогою Application aura:event .
Про LMS та aura:event в нас на форумі вже є статті, які я також рекомендую до перегляду.
Розгляньмо, які переваги для розробника дає LMS, на відміну від aura:event.
По-перше, це можливість комунікації між LWC, Visualforce та Aura Components на одній Lightning page. LMS базується на новому типі метаданих під назвою Lightning Message Channel і оскільки цей тип є пакетним, створений канал можна зв’язати з певним простором імен та зробити його доступним/недоступним для інших неймспейсів.
По-друге, цілісність посилань між каналами повідомлень і кодом, який на них посилається. LMS простий у використанні, але ця простота оманлива. Коли система розростається і потрібно контролювати велику кількість каналів, це вже стає великою проблемою. На щастя, LWC дозволяє використовувати сторонні JS бібліотеки. Тому інколи розробники вважають більш доцільним використовувати сторонню JS бібліотеку замість LMS.
Підсумовуючі нашу статтю можна сказати, що основна концепція комунікацій між компонентам однакова для LWC та AURA, але вже деталі реалізації та поведінка компонентів відрізняється. Це особливо важливо знати тим, хто працював лише з однією технологією.