Eventos no LWC são usados para comunicação com os componentes. Se houver componentes relacionados, será possível comunicar-se de pai para filho ou de filho para pai. Se houver dois componentes não relacionados, podemos nos comunicar através do modelo PubSub (Publish-Subscribe) ou com o Lightning Message Service (LMS). Neste guia, discutiremos como se comunicar com eventos de pai para filho, de filho para pai e componentes inter-relacionados usando o modelo PubSub.
Você pode colocar os componentes em sua página de registro, página de aplicativo ou página inicial. Não especificaremos este arquivo (meta-xml) novamente nos trechos de código de exemplo:
versão XML = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< versão api > 57,0 versão api >
< está exposto > verdadeiro está exposto >
< alvos >
< alvo > relâmpago__RecordPage alvo >
< alvo > relâmpago__AppPage alvo >
< alvo > relâmpago__HomePage alvo >
alvos >
LightningComponentBundle >
Comunicação de pai para filho
Se dois componentes estiverem relacionados entre si, esta comunicação é possível. Aqui, o Pai envia os dados para o Filho. O componente pai contém o componente filho. Com esta abordagem, podemos passar os dados Primitivos (Inteiro, String, Booleano, etc) de Pai para Filho, passar os dados Não Primitivos (Matriz, Objeto, Matriz de Objetos, etc) de Pai para Filho, passando os dados para o componente Filho com a ação no Pai.
Para comunicar de pai para filho, precisamos tornar os campos, propriedades e métodos disponíveis no componente filho visíveis publicamente. Isso pode ser possível decorando os campos, propriedades e métodos com o decorador “api”.
Exemplo : Declare uma variável com “api” no arquivo “js” do componente filho.
@ variável de API ;
Agora, o componente Pai usa o componente Filho no arquivo HTML por meio dos atributos HTML.
Exemplo : use a variável no arquivo HTML pai.
< c - criança - variável de comparação c - criança - comparação >
Vamos discutir alguns exemplos que descrevem como se comunicar de pai para filho.
Exemplo 1:
Este exemplo básico demonstra a obtenção de informações que são enviadas do pai para o filho.
childtComp.js
Primeiro, criamos um componente Filho que contém a variável “informações” que está disponível publicamente.
//Declara a variável como pública usando a API Decorator@ informações da API
Você pode visualizar todo o código “js” na imagem a seguir:
childtComp.html
Agora, especificamos esta variável no arquivo HTML dentro da tag central.
< modelo >< raio - título do cartão = 'Criança' >
< Centro >
< b > { Informação } b >
Centro >
raio - cartão >
modelo >
parentComp.js
Não estamos fazendo nada no arquivo “js”.
parentComp.html
Coloque o componente Child anterior em seu HTML pai passando a variável pública (informações) com algum texto.
< modelo >< raio - título do cartão = 'Pai' ícone - nome = 'padrão: conta' >
< c - criança - comparação
Informação = “Olá, recebi informações…”
c - criança - comparação >
raio - cartão >
modelo >
Saída:
Agora, vá para sua organização Salesforce e coloque o componente pai na página “Registro”. Você verá que o componente Filho recebeu as informações do Pai.
Exemplo 2:
Vamos criar dois campos de texto de entrada que aceitarão o texto dinamicamente da IU no componente Pai. Se inserirmos o primeiro texto no componente Pai, o componente filho recebe este texto em maiúsculas. Da mesma forma, recebe o texto em letras minúsculas se inserirmos o segundo texto.
childtComp.js
Crie duas variáveis – information1 e information2 – com um decorador de trilha.
- Crie o método convertToUpper() com o decorador “api” que converte o primeiro texto de entrada em maiúsculas.
- Crie o método convertToLower() com o decorador “api” que converte o segundo texto de entrada em minúsculas.
@ rastrear informações2 ;
@ API
converterToUpper ( atualInfo1 ) {
esse . Informação1 = informação real1. para Maiúsculas ( ) ;
}
@ API
converterToLower ( atualInfo1 ) {
esse . Informação2 = informação real1. para LowerCase ( ) ;
}
Todo o código “js” se parece com o seguinte:
childtComp.html
Exibimos os valores (Information1 e Information2) que vêm do arquivo “js”.
< modelo >< raio - título do cartão = 'Criança' >
Maiúsculas :& nbsp ; < b > { Informação1 } b >< br >
Minúsculas :& nbsp ; < b > { Informação2 } b >
raio - cartão >
modelo >
parentComp.js
Criamos dois métodos manipuladores que selecionam o modelo HTML filho por meio de querySelector(). Certifique-se de passar os métodos corretos que convertem o texto em maiúsculas ou minúsculas.
identificadorEvent1 ( evento ) {esse . modelo . querySelector ( 'c-childt-comp' ) . converterToUpper ( evento. alvo . valor ) ;
}
identificadorEvent2 ( evento ) {
esse . modelo . querySelector ( 'c-childt-comp' ) . converterToLower ( evento. alvo . valor ) ;
}
Todo o código “js” se parece com o seguinte:
parentComp.html
Crie um texto de entrada com eventos de manipulação para ambos. Coloque o componente Filho neste componente Pai.
< modelo >< raio - título do cartão = 'Pai' >
< Centro >
< raio - rótulo de entrada = 'Digite o texto em letras minúsculas' em mudança = { identificadorEvent1 } raio - entrada >
Centro >
< br >< br >
< Centro >
< raio - rótulo de entrada = 'Digite o texto em maiúsculas' em mudança = { identificadorEvent2 } raio - entrada >
Centro >
< br >< br >< br >
< c - criança - comparação c - criança - comparação >
raio - cartão >
modelo >
Saída:
Agora, vá para sua organização Salesforce e coloque o componente pai na página “Registro”.
Você verá duas entradas de texto na IU.
Vamos escrever algum texto na primeira entrada e você verá que o texto é convertido para maiúsculas e exibido no componente Filho.
Escreva algum texto na segunda entrada e você verá que o texto é convertido em letras minúsculas e exibido no componente Filho.
Comunicação de criança para pai
Semelhante à comunicação anterior, para comunicar a Criança aos Pais, ambos os componentes devem estar relacionados entre si. Podemos comunicar o Filho ao Pai de três maneiras diferentes: chamar o Pai ao Filho usando um evento simples e chamar o Pai ao Filho usando um evento com os dados e o evento borbulhando. Veremos o evento simples neste guia.
Para comunicar o Filho ao Pai, precisamos criar e despachar os eventos. Para isso, um evento customizado deve ser criado. Um evento personalizado é um evento criado por você. Podemos criá-lo usando a nova palavra-chave. O Event_Name pode ser qualquer coisa (pode ser uma string, não além de letras maiúsculas ou dígitos). Por enquanto, não discutiremos as opções.
Sintaxe : novo CustomEvent('Event_Name',{opções…})
Agora você tem o evento personalizado. O próximo passo é despachar o evento. Para despachar o evento, precisamos especificar o evento que criamos no método EventTarget.dispatchEvent().
Sintaxe : this.displatchEvent(new CustomEvent('Event_Name',{opções…})
Finalmente, precisamos lidar com o evento. Agora, temos que chamar o componente filho em seu componente Pai. Passe o nome do seu evento especificando o prefixo “on” no nome do seu evento. Isso leva o manipulador do ouvinte de eventos.
Sintaxe:
< c - criança - componente em seuEventName = { ouvinteHandler } c - criança - componente >Exemplo:
Neste exemplo, criamos um componente Pai (exampleParent) e dois componentes Filho.
- No primeiro Child (exampleChild), criamos um texto de entrada que permite ao usuário fornecer algum texto. O mesmo texto é exibido no componente Pai em letras maiúsculas.
- No segundo Child (child2), criamos um texto de entrada que permite ao usuário fornecer algum texto. O mesmo texto é exibido no componente Pai em letras minúsculas.
exemploChild.js
Criamos um método handleChange1 que cria o CustomEvent “linuxhintevent1” com o detalhe como valor de destino. Depois disso, despachamos este evento. Incorpore o seguinte trecho neste arquivo “js”.
// trata o eventoidentificadorChange1 ( evento ) {
evento. prevenirDefault ( ) ;
const nome1 = evento. alvo . valor ;
const selecioneEvento1 = novo Evento Personalizado ( 'linuxhintevent1' , {
detalhe : nome1
} ) ;
esse . despachoEvento ( selecioneEvento1 ) ;
}
exemploChild.html
O método de manipulação anterior criado em “js” é tratado com base na entrada do relâmpago no componente HTML.
< modelo >< raio - título do cartão = 'Criança 1' >
< divisão aula = 'slds-m-around_medium' >
< raio - rótulo de entrada = 'Insira o texto em letras minúsculas' em mudança = { identificadorChange1 } raio - entrada >
divisão >
raio - cartão >
modelo >
filho2.js
Criamos um método handleChange2 que cria o CustomEvent “linuxhintevent2” com o detalhe como valor alvo. Depois disso, despachamos este evento.
identificadorChange2 ( evento ) {evento. prevenirDefault ( ) ;
const nome2 = evento. alvo . valor ;
const selecioneEvento2 = novo Evento Personalizado ( 'linuxhintevent2' , {
detalhe : nome2
} ) ;
esse . despachoEvento ( selecioneEvento2 ) ;
}
filho2.html
O método de manipulação anterior criado em “js” é tratado com base na entrada do relâmpago no componente HTML.
< modelo >< raio - título do cartão = 'Criança 2' >
< divisão aula = 'slds-m-around_medium' >
< raio - rótulo de entrada = 'Insira o texto em maiúsculas' em mudança = { identificadorChange2 } raio - entrada >
divisão >
raio - cartão >
modelo >
exemploParent.js: Incorpore este trecho em seu arquivo “js” dentro da classe.
- Converta a entrada para maiúsculas usando a função toUpperCase() em handleEvent1() e armazene-a na variável Information1
- Converta a entrada em minúsculas usando a função toLowerCase() em handleEvent2() e armazene-a na variável Information2.
// Converte a entrada para maiúsculas usando a função toUpperCase()
// no handleEvent1() e armazena na variável Information1
handleEvent1(evento) {
const input1 = evento.detalhe;
this.Information1 = input1.toUpperCase();
}
@track Informações2;
// Converte a entrada para minúsculas usando a função toLowerCase()
// no handleEvent2() e armazena na variável Information2
handleEvent2(evento) {
const input2 = evento.detalhe;
this.Information2 = input2.toLowerCase();
}
exemploParent.html
Agora, exiba as duas variáveis (Information1 e Information2) no componente Pai HTML especificando ambos os componentes Filho.
< divisão aula = 'slds-m-around_medium' >
Mensagem Child-1 em maiúsculas: < b > {Informações1} < / b >< br >
Mensagem Child-2 em letras minúsculas: < b > {Informação2} < / b >< br >
< / b >< br >
< / divisão >
< / cartão relâmpago>
< / modelo>
Saída:
Agora, vá para sua organização Salesforce e coloque o componente pai na página “Registro”.
Você pode ver que existem dois componentes Filho no Pai.
Vamos digitar algum texto no texto de entrada no componente Filho 1. Podemos ver que nosso texto é exibido em letras maiúsculas no componente Pai.
Forneça algum texto no texto de entrada no componente Filho 2. Podemos ver que nosso texto é exibido em letras minúsculas no componente Pai.
Também pode ser possível inserir os dois textos ao mesmo tempo.
Modelo PubSub
Quando você está trabalhando com componentes independentes (não relacionados entre si) e deseja enviar as informações de um componente para outro, você pode usar este modelo. PubSub significa Publicar e Assinar. O componente que envia os dados é conhecido como Publicador e o componente que recebe os dados é conhecido como Assinante. É necessário utilizar o módulo pubsub para enviar os eventos entre os componentes. Já está predefinido e fornecido pelo Salesforce. O nome do arquivo é pubsub. Você deve criar um componente LWC e digitar este código em seu arquivo javascript que é “pubsub.js”.
Exemplo:
Vamos criar dois componentes – Publicar e Assinar.
Em Publicar, permitimos que os usuários criem um texto de entrada. Ao clicar no botão, os dados são recebidos em letras maiúsculas e minúsculas no componente Assinar.
publicar.js
Incorpore este código em seu arquivo JSON. Aqui, obtemos as informações e publicamos as informações.
A variável de informação estará em maiúscula e a informação1 estará em minúscula. Certifique-se de incluir esta instrução de importação no início do código – import pubsub from ‘c/pubsub’.
Informaçãoinformação2
// Obtém as informações em maiúsculas e minúsculas
manipulador de informações ( evento ) {
esse . Informação = evento. alvo . valor ;
esse . informação2 = evento. alvo . valor ;
}
//Publica ambas as informações (em maiúsculas e minúsculas)
publicarHandler ( ) {
pubsub. publicar ( 'Publicar' , esse . Informação )
pubsub. publicar ( 'Publicar' , esse . informação2 )
}
Deveria ser assim:
publicar.html
Primeiro, criamos a entrada relâmpago para aceitar o texto com as informações do manipulador. Depois disso, um botão é criado com a funcionalidade onclick. Essas funções estão no trecho de código “js” anterior.
< / cartão relâmpago>
< / modelo>
assinar.js
Incorpore este código em seu arquivo JSON. Aqui, primeiro assinamos as informações convertendo-as em maiúsculas e minúsculas separadamente dentro do método callSubscriber(). Depois disso, invocamos este método através do métodoconnectedcallback(). Certifique-se de incluir esta instrução de importação no início do código – import pubsub from ‘c/pubsub’.
Informaçãoinformação2
// invocando o callSubscriber()
conectadoCallback ( ) {
esse . chamarAssinante ( )
}
//Assina as informações convertendo para maiúsculas
chamarAssinante ( ) {
pubsub. se inscrever ( 'Publicar' , ( Informação ) => {
esse . Informação = Informação. para Maiúsculas ( ) ;
} ) ,
//Assina as informações convertendo para letras minúsculas
pubsub. se inscrever ( 'Publicar' , ( informação2 ) => {
esse . informação2 = informação2. para LowerCase ( ) ;
} )
}
Deveria ficar assim:
inscrever-se.html
Exibimos o texto em maiúsculas (armazenadas em informações) e minúsculas (armazenadas em informações2).
< divisão aula = 'slds-p-around_medium' >
Informações recebidas em maiúsculas - < b > {Informação} < / b >< br >
Informações recebidas em letras minúsculas - < b > {informação2} < / b >
< / divisão >
< / cartão relâmpago>
< / modelo>
Saída:
Adicione esses dois componentes à sua página. Certifique-se de que ambos os componentes estejam na mesma página. Caso contrário, a funcionalidade não funcionará.
Vamos inserir algum texto no componente “Publicar” e clicar no botão “Enviar dados”. Podemos ver que o texto é recebido em letras maiúsculas e minúsculas.
Conclusão
Agora podemos nos comunicar com os componentes do LWC por meio do conceito de evento no Salesforce LWC. Como parte deste guia, aprendemos como nos comunicar dos pais para os filhos e dos filhos para os pais. O modelo PubSub é usado caso seus componentes não estejam relacionados entre si (não Pai – Filho). Cada cenário é explicado com um exemplo simples e certifique-se de incluir o código fornecido no início deste guia no arquivo “meta-xml”.