Fazer a comunicação entre componentes sem relação
Para se comunicar entre as subárvores no DOM (e em alguns casos entre janelas de navegador diferentes conectadas à mesma organização), use o Lightning Message Service (LMS). O LMS é um serviço de publicação e assinatura que facilita as comunicações entre componentes Web do Lightning, componentes do Aura e páginas do Visualforce.
Use o LMS para comunicação entre componentes sem relação quando você não controlar os dois componentes e um pai em comum. O LMS é potente, eficaz e fácil de usar, mas não caia na tentação de usá-lo quando ele não é necessário. O acionamento de eventos de DOM é muito mais eficiente. Quando você precisa se comunicar entre componentes com um pai que não está sob seu controle, por exemplo, dois slots do Criador de aplicativos, o Lightning Message Service é a escolha perfeita.
Uma terceira unidade de negócios quer participar do projeto de manipulação de números. Ela precisa que Prior Count (Contador anterior) e Count (Contador) estejam juntos em seu próprio componente para poder exibi-los sempre que precisar. Vamos começar criando o canal de mensagens para que fique pronto para uso pelos componentes.
Criar um canal de mensagens do Lightning
- No Visual Studio Code, na pasta default (padrão), crie uma pasta chamada
messageChannels
.
- Na pasta messageChannels, crie um arquivo chamado
Count_Updated.messageChannel-meta.xml
.
- Em Count_Updated.messageChannel-meta.xml, cole este código:
- Salve e implante o arquivo.
Criar o componente Publisher
- Crie um componente Web do Lightning chamado
remoteControl
.
- Substitua o conteúdo de remoteControl.js por este código:Importamos
publish
eMessageContext
do Lightning Message Service. Também importamos o canal que acabamos de criar (Count_Updated__c
). O payload de dados é enviado com a funçãopublish
.
- Salve o arquivo.
- Abra remoteControl.html e adicione este código entre as tags
template
:Observe que estamos reutilizando o componente controls.
- Salve o arquivo.
- Atualize remoteControl.js-meta.xml para disponibilizar o componente remoteControl nas páginas de aplicativo do Lightning:
- Salve o arquivo.
Criar o componente Subscriber
- Crie um componente Web do Lightning chamado
counts
.
- Substitua o conteúdo de counts.js por este código:
A referência a @wire(MessageContext)
faz com que unsubscribe
seja executado durante o ciclo de vida de destruição do componente.
- Salve o arquivo.
- Abra counts.html e adicione este código entre as tags
template
: - Salve o arquivo.
- Atualize counts.js-meta.xml para disponibilizar o componente counts nas páginas de aplicativo do Lightning:
- Salve o arquivo.
Adicionar os novos componentes ao aplicativo Event Comms
- Implante a pasta lwc e atualize a página do aplicativo Event Comms.
- Abra a página Event Comms (Comunicações de evento) para edição.
- Arraste o componente remoteControl até a região direita da página.
- Arraste o componente counts até a região direita, logo abaixo do componente remoteControl.
- Clique em Save (Salvar) e saia do Criador de aplicativo Lightning.
Verificar comunicações
- Clique nos botões no Controle Remoto para mudar a contagem no componente counts.
Você pode usar o Lightning Message Service para se comunicar também com componentes do Aura e páginas do Visualforce. É a maneira mais limpa de manter vários tipos de componente em sincronia.
Agora você tem um bom conhecimento de como fazer a comunicação entre componentes Web do Lightning. Você trabalhou em cenários de filho para pai, pai para filho e componentes sem relação. Confira os recursos para saber mais sobre como se comunicar com componentes Web do Lightning.
Recursos
- Guia de desenvolvimento de componentes Web do Lightning: Comunicar-se no DOM
- Guia de desenvolvimento de componentes Web do Lightning: Configurar propagação de evento
- Guia de desenvolvimento de componentes Web do Lightning: Melhores práticas de eventos
- Guia de desenvolvimento de componentes Web do Lightning: Lightning Message Service
- Referência de componentes Web do Lightning: Message Service
- GitHub: Receitas de LWC: ImsPublisherWebComponent
- GitHub: Receitas de LWC: lmsSubscriberWebComponent
- Blog de desenvolvedores do Salesforce: Lightning Message Service [Visualização para desenvolvedores]
- Blog de desenvolvedores do Salesforce: Desenvolva suas habilidades em LWC
- Blog de desenvolvedores do Salesforce: Padrões de comunicação entre componentes para componentes Web do Lightning