Phenquestions
Vue.js é uma estrutura versátil e completa para a construção de grandes aplicativos da web. Qualquer aplicativo da web é dividido em componentes. Por exemplo, um site simples que inclui um cabeçalho, barra lateral e alguns outros componentes. A fim de gerenciar e lidar com esta abordagem baseada em componentes, Vue.js oferece a relação pai-filho entre os componentes e se quisermos enviar alguns dados entre os componentes. Vue.js oferece adereços para enviar dados do pai para um componente filho, mas para enviar dados do filho para o pai; temos que emitir eventos personalizados. Neste artigo, aprendemos sobre como disparar e ouvir eventos personalizados.Em primeiro lugar, vamos ver como disparar um evento personalizado no Vue.js e então como ouvir aquele evento. A sintaxe para disparar um evento no Vue.js é
esta.$ emit ('eventName')Nesta sintaxe, precisamos ter cuidado ao dar um nome ao evento, pois usar o mesmo nome; vamos ouvir mais tarde este evento. Para ouvir este evento, podemos ouvi-lo como ouvimos um evento de clique no Vue.js. Por exemplo
Podemos escrever qualquer expressão entre aspas, bem como uma função. Então, vamos tentar um exemplo para entender melhor.
Exemplo
Suponha que temos um componente chamado “parentComponent,” que inclui um componente filho com o nome de “childComponent” para o qual estamos passando uma mensagem usando props.
Componente Pai
Componente Criança
No componente filho, estamos obtendo adereços e mostrando a mensagem na tag 'p'.
msg
Agora, depois de ter esses dois componentes configurados. Vamos dizer olá de volta ao nosso ParentComponent. Para dizer olá de volta, primeiro criaremos um botão e, ao clicar nesse botão, chamaremos a função “helloBack”. Depois de criar o botão, o HTML do componente filho ficaria assim
mensagem
Vamos criar a função “helloBackFunc” no objeto de métodos também. Em que iremos emitir o “helloBackEvent” junto com uma variável “helloBackVar” que contém a string “Hello Parent”. Depois de criar uma função, o javascript do componente filho ficaria assim
Terminamos de disparar o evento. Agora, vamos passar para o componente pai para ouvir o evento.
No componente pai, podemos simplesmente ouvir o evento, assim como ouvimos o evento de clique. Vamos simplesmente ouvir o evento na tag do ChildComponent e chamar a função “thanks ()” nele.
Na função de agradecimento, iremos atribuir a string passada à variável chamada “thanksMessage”. Depois de criar a função e atribuir a string passada à variável, o javascript do “parentComponent” ficaria assim
E vincule a variável "thanksMessage" no modelo em algum lugar para ver se funciona ou não.
Componente Pai
thanksMessage
Componente Criança
Depois de criar e escrever todo esse código, vá para a página da web e recarregue-o para obter as funcionalidades mais recentes.
Podemos ver que os adereços são transmitidos com sucesso para o componente filho. Agora, se clicarmos no botão, que na verdade está no componente filho. A mensagem de agradecimento deve ser exibida logo após o título do componente pai.
Como você pode ver, ele é exibido.
Então, é assim que podemos emitir ou disparar os eventos personalizados e ouvi-los em algum outro componente do Vue.js.
Resumo
Neste artigo, aprendemos a emitir eventos personalizados no Vue.js. Este artigo contém um exemplo passo a passo adequado para entendê-lo com uma breve explicação junto com ele. Portanto, esperamos que este artigo ajude a ter conceitos melhores e claros sobre a emissão de eventos personalizados no Vue.js. Para obter mais conteúdo útil, continue visitando linuxhint.com
