Vue.JS Emite eventos personalizados
Vue.JS é uma estrutura versátil e completa para criar enormes aplicativos da web. Qualquer aplicativo da web é dividido nos componentes. Por exemplo, um site simples que inclui um cabeçalho, barra lateral e alguns outros componentes. Para 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.O JS oferece adereços para enviar dados do pai para um componente filho, mas para enviar dados da criança para o pai; Temos que emitir eventos personalizados. Neste artigo, aprendemos sobre disparar e ouvir eventos personalizados.Primeiro de tudo, vamos ver como demitir um evento personalizado em Vue.JS e depois como ouvir esse evento. A sintaxe para disparar um evento em Vue.JS é isso.$ emit ('EventName')
Nesta sintaxe, precisamos ter cuidado ao dar um nome ao evento, porque usando o mesmo nome; Mais tarde, ouviremos este evento. Para ouvir este evento, podemos ouvi -lo enquanto ouvimos um evento de clique em Vue.JS. Por exemplo
Podemos escrever qualquer expressão nas vírgulas invertidas, bem como uma função. Então, vamos tentar um exemplo para entender melhor isso.
Exemplo
Suponha que tenhamos um componente chamado "ParentComponent", que inclui um componente filho nele com o nome de "componente infantil" para o qual estamos passando uma mensagem usando adereços.
Componente pai
Componente filho
No componente filho, estamos recebendo adereços e mostrando a mensagem na tag 'P'.
msg
Agora depois de configurar esses dois componentes. Vamos dizer olá de volta ao nosso componente parental. Para dizer olá de volta, primeiro criaremos um botão e, com o clique desse botão, chamaremos a função "Helloback". Depois de criar o botão, o HTML do componente filho seria assim
mensagem
Vamos criar a função "Hellobackfunc" no objeto de métodos também. Em que emitiremos a "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 seria assim
Terminamos de disparar o evento. Agora, vamos para o componente pai para ouvir o evento.
No componente pai, podemos simplesmente ouvir o evento, assim como ouvimos o evento de clique. Simplesmente ouviremos o evento na tag do componente infantil e chamamos a função "agradecimento ()".
Na função de agradecimento, atribuiremos a string passada à variável chamada "obrigado. Depois de criar a função e atribuir a string passada à variável, o javascript do "componente parental" seria assim
E vincular a variável "agradecimento" no modelo em algum lugar para ver que funciona ou não.
Componente pai
agradecimento
Componente filho
Depois de criar e escrever todo esse código, vá para a página da web e recarregue -o para obter as mais recentes funcionalidades.
Podemos ver que os adereços são transmitidos com sucesso para o componente filho. Agora, se clicarmos no botão, que está realmente no componente filho. A mensagem de agradecimento deve ser exibida logo após o cabeçalho do componente pai.
Como você pode ver, é exibido.
Então, é assim que podemos emitir ou disparar os eventos personalizados e ouvi -los em algum outro componente em Vue.JS.
Resumo
Neste artigo, aprendemos a emitir eventos personalizados no Vue.JS. Este artigo contém um exemplo adequado passo a passo para entendê -lo com uma breve explicação junto com ele. Então, esperamos que este artigo ajude a ter conceitos melhores e claros de emitir eventos personalizados em vue.JS. Para um conteúdo mais útil, continue visitando Linuxhint.com