LWC - send Event from parent to child

LWC - send Event from parent to child

Собственно вопрос.

Как послать в обратную сторону я знаю и это работает чудесно.

pubsub не хотелось бы использовать

Добавь атрибут в child и подпишись на его обновление, через сеттер. А в parent просто проставляй атрибут.

Gres
Добавь атрибут в child и подпишись на его обновление, через сеттер. А в parent просто проставляй атрибут.

Можно, но хочется по красивому все сделать...

Похоже не судьба мне бродкаст послать

pubsub listeners need a "@wire(CurrentPageReference) pageRef" property
при этом код :

import { LightningElement, track, api, wire } from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class TabManager extends LightningElement {
@wire(CurrentPageReference) pageRef;

connectedCallback() {
// subscribe to event
registerListener('broadcast', this.handleEvents, this);
}
}

Причем есть похожий компонент и там используется fire без проблем.

В общем проблема скорее всего кроется в том что я запускаю LWC внутр VF

document.addEventListener('broadcast', this.handleEvents, false); - позволяет обмениваться сообщениями, но в этом случае мы теряем scope(this)

Ну наконец то началась движуха на LWC тему, может потихоньку и освоим тему.

мне тоже интересно, как это сделать, в том примере с Bike application что я делал, кастомный эвент всплывает до корневого компонента, а потом данные присовываются в компонент соседней ветки через его атрибут. Но в теории эвент должен достигать все компоненты, помню в Ауре было что-то вроде scope у кастомного эвента, определяющей как далеко эвент "расходится" по приложению.

Кстати в чистом Web Components, атрибуты компоненты и сеттеры его JS класса - это разные вещи, а в LWC это одна и та же вещь.

wilder
Можно, но хочется по красивому все сделать...

Что значит по красивому?
В LWC коммуникация идёт по принципу:
вниз - через проперти или через паблик функции чайлда
вверх - через ивенты
pubsub это игрушка не для прода, а скорее для ознакомления. Если я не ошибаюсь, то они уже сделали его официальную альтернативу. Пока не дошли руки пощупать новинку, т.к. в принципе не было необходимости.

Буду разбираться. Отпишусь

Developer
Если я не ошибаюсь, то они уже сделали его официальную альтернативу. Пока не дошли руки пощупать новинку, т.к. в принципе не было необходимости

Из того что я вижу, альтернатива так себе.

wilder
Из того что я вижу, альтернатива так себе.

Самому интересно узнать детали, т.к. пока загружен другой работой и не до этого

Developer
В LWC коммуникация идёт по принципу:

1. через проперти. Я так понимаю, через render() отлавливаем?
2. через паблик функции чайлда - я не знаю их, поэтому мне и нужен broadcast

1) это значит что все проперти, которые мы передаём в чайлд известны ему и могут быть использованы для работы. Если важно знать момент изменения проперти, то можно хранить в чайлде state и оценивать его в renderedCallback
2) т.е. доступа в чайлд компоненту нет?

Кто-то себе уже взял курс одного парня из солнечной странны:) влом искать по нету, нужен для начало интрадакшен в LWC

Developer
1) это значит что все проперти, которые мы передаём в чайлд известны ему и могут быть использованы для работы. Если важно знать момент изменения проперти, то можно хранить в чайлде state и оценивать его в renderedCallback
2) т.е. доступа в чайлд компоненту нет?
Developer
2) т.е. доступа в чайлд компоненту нет?

Они все динамические и их может быть много.

wilder
Они все динамические и их может быть много.

Динамические проперти в lwc?
Даже стало интересно. А можно пример кода?

Developer
wilder
Они все динамические и их может быть много.

Динамические проперти в lwc?
Даже стало интересно. А можно пример кода?

Не проперти динамические, а children, их может быть много и они могут быть разные.

Понятно что во всех из них я могу определить метод с одним и тем же названием, но хотелось бы этого избежать

Мне кажется, что в данной ситуации нужно обсудить всю архитектуру приложения с командой людей, которые работают над ним. Тут прямо напрашивается мозговой штурм и форум не очень удобен, т.к. желательно личное присутствие людей или хотя бы созвон

Developer
Мне кажется, что в данной ситуации нужно обсудить всю архитектуру приложения с командой людей, которые работают над ним. Тут прямо напрашивается мозговой штурм и форум не очень удобен, т.к. желательно личное присутствие людей или хотя бы созвон :)

Архитектор, программист и по совместительству дизайнер, это один и тот же человек:)

Использовал в итоге вариант номер 2 :)

я конечно не пробовал
но нельзя ли сделать просто в чайлде субскрайб на ивент
а в паренте dispatch?

ну то есть точно так как это работает в обычном жаваскрипте?

document.addEventListener('LWC_NEEBOWIY_EVENT', function (e) {

console.log(e.detail);

}, false);

let ev = new CustomEvent('LWC_NEEBOWIY_EVENT', {

detail: {

}
});
document.dispatchEvent(ev);

Maxim Elets
ну то есть точно так как это работает в обычном жаваскрипте?

wilder
document.addEventListener('broadcast', this.handleEvents, false); - позволяет обмениваться сообщениями, но в этом случае мы теряем scope(this)

Interesting information? Help us, post link to social media..