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.

No componente filho, estamos recebendo adereços e mostrando a mensagem na tag 'P'.

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

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 ()".