Aprenda como o Vue Emits pode simplificar o tratamento de eventos, tornando seu código mais limpo e eficiente.
Com a crescente demanda por aplicativos da web interativos e fáceis de usar, desenvolvedores de todo o mundo recorreram ao Vue.js como sua estrutura JavaScript preferida. Estatísticas recentes de Construído com mostram um aumento na adoção, com mais de 2 milhões de sites utilizando Vue.js por seus recursos e componentes intuitivos. O que diferencia o Vue.js é sua simplicidade e versatilidade, tornando-o uma estrutura ideal para a criação de interfaces de usuário dinâmicas.
Mecanismo de manipulação de eventos em Vue.js, que depende de Vue $emits para gerenciamento de eventos personalizados. Ao aproveitar $emit, os desenvolvedores podem estabelecer comunicação entre componentes pai e filho, garantindo fluxo de dados e gerenciamento de estado dentro de um aplicativo Vue.js. Dominar a utilização do Vue $emit é crucial para desbloquear o potencial desta estrutura e construir aplicações web.
Este artigo tem como objetivo explorar o domínio do $emit investigando sua estrutura e significado quando se trata de manipulação de eventos. Forneceremos exemplos do mundo real que mostram práticas para implementação de $emit, destacando sua capacidade de promover a interação entre componentes. Ao final deste artigo, você terá uma compreensão do Vue $emit, capacitando-o a aprimorar suas habilidades de desenvolvimento de Vue.js e a criar experiências web cativantes que realmente envolvem os usuários. Agora vamos mergulhar no mundo do Vue $emit e descobrir como eles podem lidar com eventos de maneira eficaz em aplicativos Vue.js.
Compreendendo Vue.js e Vue $emit
Vamos nos aprofundar no que é Vue.js e como os eventos de emissão funcionam no Vue.js.
Breve visão geral do Vue.js
Vue.js é uma estrutura JavaScript progressiva para construção de interfaces de usuário. Vue.js é um framework que pode ser facilmente integrado a aplicações, sejam elas de pequena ou grande escala. Uma de suas características é o uso de programação reativa que garante que a interface do usuário (IU) seja atualizada automaticamente sempre que os dados dos quais ela depende mudam. Este aspecto torna o Vue.js particularmente eficaz para a criação de interfaces de usuário responsivas.
Introdução ao Vue $Emit
O tratamento de eventos personalizados é um aspecto do Vue.js que é alcançado com a ajuda do Vue $emit. $emit permite a comunicação entre componentes em um aplicativo Vue.js, facilitando o acionamento e a escuta de eventos personalizados. A função do Vue $emit é permitir que componentes filhos enviem dados ou sinais para seus componentes pais, estabelecendo assim um canal contínuo de comunicação.
Na hierarquia de componentes Vue.js, os componentes filhos são aninhados nos componentes pais. Como os componentes pais podem transmitir dados para seus componentes filhos usando props, às vezes os componentes filhos precisam notificar seus componentes pais sobre determinados eventos ou atualizações de dados.
Com $emit no Vue, um componente filho pode emitir um evento personalizado que o pai pode então ouvir e responder de acordo. Isso permite que os componentes filhos interajam com as propriedades de seus componentes pais sem modificar diretamente outras propriedades dos dados dos pais, garantindo assim uma base de código mais organizada e de fácil manutenção.
Alguns casos de uso comuns para Vue $emit são quando um componente de botão filho pode emitir um evento para notificar o componente pai de que o botão foi clicado. O pai pode responder atualizando seus dados ou acionando outras ações. Outro caso de uso é quando um formulário é enviado e o componente filho do formulário envia um evento contendo os dados do formulário. Este evento permite que o pai gerencie a validação do formulário ou manipule o envio de dados.
Como funcionam as emissões do Vue
No Vue.js, ao trabalhar com componentes filhos, você tem a capacidade de acionar um evento personalizado dentro dele usando o método $emit. Para emitir um evento personalizado você pode usar a sintaxe.
this.$emit('event-name', eventData);
Nesta sintaxe:
- isso representa a instância do componente Vue.
- $emit é um método integrado fornecido pelo Vue.js para emitir eventos personalizados.
- nome do evento refere-se ao nome do evento personalizado que será acionado. O nome deve estar no formato kebab.
- eventData (opcional) representa quaisquer dados que você deseja transmitir junto com o evento. Pode ser qualquer valor JavaScript, como uma string ou objeto.
O método de instância $emit é fornecido por Vue.js e pode ser acessado em qualquer componente. É usado para acionar eventos personalizados emitidos de componentes filhos para seus componentes pais. Quando um componente filho emite um evento usando $emit o componente pai pode escutar esse evento e responder de acordo.
Comunicação entre o componente pai e o componente filho
O papel do Vue $ emit
Vue $emit é fundamental para permitir a comunicação dos componentes filho para pai em um aplicativo Vue.js. Na hierarquia de componentes, os componentes pais podem transmitir dados para seus componentes filhos usando props, permitindo assim que os componentes filhos exibam e usem esses dados. No entanto, existem cenários em que os componentes filhos precisam enviar mensagens ou notificar seus componentes pais sobre determinados eventos ou atualizações de dados. É aqui que o Vue $emit entra em ação.
Usando $emit, um componente filho pode emitir um evento personalizado e o componente pai pode ouvir o evento emitido, chamar esse evento e responder de acordo. Este mecanismo estabelece um canal de comunicação contínuo entre o filho e o pai, o que permite que os componentes filhos interajam com seus pais sem modificar diretamente os dados dos pais. Essa dissociação garante uma base de código mais sustentável e organizada, promovendo uma melhor separação de interesses.
$emit ajuda a gerenciar o fluxo de dados em um aplicativo Vue.js. Eles permitem que componentes filhos enviem dados ou informações relevantes para seus componentes pais, onde geralmente residem a lógica central do aplicativo e o gerenciamento de dados. Essa comunicação bidirecional facilita atualizações eficientes e sincroniza o estado do aplicativo entre os componentes.
Vue $emit contribui significativamente para o gerenciamento eficaz do estado do aplicativo. Ao permitir que os componentes filhos notifiquem seus componentes pais sobre alterações ou eventos, o pai pode então tomar as ações apropriadas, atualizando seus dados e garantindo que todo o aplicativo permaneça em um estado consistente.
Exemplo de comunicação com Vue Emits
Vejamos um exemplo de comunicação pai-filho usando Vue $emit.
Clique em Comunicação de Evento
Neste exemplo, o ChildComponent emitiria um evento personalizado denominado botão clicado com a mensagem 'Botão foi clicado!'. O ParentComponent escuta este evento e atualiza seus dados de mensagem com a mensagem recebida que é então exibida no modelo.
ChildComponent.vue
<template>
<button @click="sendDataToParent">Click me!</button>
</template>
<script>
export default {
methods: {
sendDataToParent {
this.$emit('button-clicked', 'Button was clicked!');
},
},
};
</script>
ParentComponent.vue
<template>
<div>
<ChildComponent @button-clicked="handleButtonClick" />
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data {
return {
message: '',
};
},
methods: {
handleButtonClick(data) {
this.message = data;
},
},
};
</script>
O poder do Vue Emit no tratamento de eventos
Tratamento de eventos em Vue.js
No Vue.js, você pode lidar facilmente com eventos JavaScript nativos, como faria em JavaScript. Você pode vincular diretamente eventos nativos, como click ou keyup, a elementos HTML em modelos Vue.js usando a diretiva on ou seu símbolo @ abreviado.
Tratamento de eventos personalizados
No Vue.js, os componentes filhos podem enviar eventos personalizados para seus componentes pais usando o método $emit. Este processo é frequentemente referido como “emissão” de um evento. Depois que um filho emite um evento, o componente pai pode “escutar” esse evento específico usando o símbolo @ ou a diretiva v-on. Este mecanismo facilita a comunicação entre os componentes filho e pai.
Vue $emit também permite a passagem de dados de componentes filhos para pais durante a propagação do evento. Quaisquer dados passados como segundo argumento em $emit estarão disponíveis como argumento no manipulador de eventos do componente pai.
Comunicação entre componentes com Vue $emit
$emit desempenha um papel vital ao facilitar a comunicação entre componentes e permitir que eles interajam e troquem informações. Os componentes podem emitir eventos personalizados com dados e seus componentes pais podem escutar esses eventos de emissão e responder enviando os dados de acordo.
Melhores práticas com $emit
Vejamos algumas práticas recomendadas com $emit.
Convenções de nomenclatura
Quando se trata de nomear eventos personalizados, geralmente é recomendado usar kebab case. No caso do kebab, as palavras são separadas por hífens. Todas as letras são minúsculas. Por exemplo, clicado em um botão e enviado por formulário. Esta convenção ajuda a manter a consistência e clareza na base de código, facilitando a diferenciação de eventos personalizados de eventos HTML.
Usar kebab case para nomes de eventos se alinha aos atributos HTML. Em HTML, atributos e nomes de eventos geralmente são escritos em caixa kebab. Seguindo a convenção para nomes de eventos personalizados, a base de código permanece consistente e mais legível. Além disso, o caso kebab é facilmente compreensível em comparação com as convenções, garantindo que os desenvolvedores possam compreender rapidamente o contexto e a finalidade de um evento personalizado sem qualquer confusão.
Propagando eventos na árvore de componentes
A propagação de eventos usando $emit envolve o processo de emissão de eventos personalizados de componentes filhos e permitir que esses eventos subam pelos componentes pais na árvore de componentes. Esse processo de bolha continua até que o evento seja tratado por um componente pai ou atinja a instância raiz.
Embora a propagação de eventos possa ser útil para a comunicação entre componentes aninhados, é importante evitar usá-la com frequência, pois pode dificultar a manutenção do código. O uso excessivo da propagação de eventos pode tornar o fluxo dos aplicativos mais complexo e difícil de acompanhar. Quando os eventos precisam passar por níveis na hierarquia de componentes, pode ser bastante desafiador depurar e compreender o fluxo de dados. Nessas situações, é aconselhável explorar padrões de comunicação. Outra opção é utilizar o Vuex, que é a biblioteca de gerenciamento de estado do Vues ou um barramento de eventos centralizado para cenários.
Lidando com vários eventos
$emit pode lidar com vários eventos emitindo diferentes nomes de eventos personalizados dos componentes filhos. Cada evento pode ter seu próprio manipulador de eventos correspondente no componente pai, permitindo que ações específicas sejam executadas com base nos eventos emitidos.
Aplicações do mundo real de $ emit
Vejamos um exemplo real de como $emit pode ser usado em um aplicativo simples de gerenciamento de tarefas. Nesta aplicação teremos um componente pai que representa a lista de tarefas e cada tarefa será um componente filho. Quando um usuário marca uma tarefa como concluída, o componente filho emitirá um evento para notificar o componente pai para atualizar o status da tarefa.
Etapa 1: configurar o projeto e os pré-requisitos
Certifique-se de ter Node.js e npm instalados em sua máquina.
Crie um novo projeto Vue.js usando Vue CLI.
npm install -g @vue/cli vue create task-management-app cd task-management-app
Adicione Bootstrap para estilizar.
npm install bootstrap
Crie a seguinte estrutura de pastas.
- src - components - TaskList.vue (Parent component) - TaskItem.vue (Child component) - App.vue
Observe a versão do Vue.js e as dependências relacionadas encontradas no arquivo package.json no momento da criação deste tutorial.
Etapa 2: Implementar o componente filho – TaskItem.vue
Nesta etapa, implementaremos o componente filho responsável por exibir tarefas individuais. Neste componente filho, recebemos o objeto task como um suporte do componente pai. Quando o usuário marca a tarefa como concluída clicando na caixa de seleção, o método markAsCompleted é chamado. Este método emite um evento personalizado denominado tarefa concluída junto com o objeto de tarefa como dados do evento.
<template>
<div>
<label :>
<input type="checkbox" v-model="task.completed" @change="markAsCompleted" />
{{ task.name }}
</label>
</div>
</template>
<script>
export default {
props: {
task: {
type: Object,
required: true,
},
},
methods: {
markAsCompleted {
this.$emit('task-completed', this.task);
},
},
};
</script>
<style>
.completed {
text-decoration: line-through;
color: #999;
}
</style>
Etapa 3: Implementar o componente pai – TaskList.vue
Nesta etapa, criaremos o componente que trata da lista de tarefas. Dentro deste componente, começamos configurando um array para armazenar nossas tarefas. Em seguida, passamos por cada tarefa na matriz. Exiba-o usando o componente TaskItem. Cada tarefa é passada como um suporte para o componente TaskItem. Quando uma tarefa é marcada como concluída (acionada pelo evento task-completed emitido pelo componente TaskItem), executamos a função handleTaskCompleted. Esta função atualiza o status das tarefas na matriz de tarefas dos componentes pai.
<template>
<div>
<h2>Task List</h2>
<TaskItem v-for="task in tasks" :key="task.id" :task="task" @task-completed="handleTaskCompleted" />
</div>
</template>
<script>
import TaskItem from './TaskItem.vue';
export default {
components: {
TaskItem,
},
data {
return {
tasks: (
{ id: 1, name: 'Buy groceries', completed: false },
{ id: 2, name: 'Pay bills', completed: false },
{ id: 3, name: 'Finish project', completed: false },
),
};
},
methods: {
handleTaskCompleted(task) {
// Find the task in the tasks array and update its status
const index = this.tasks.findIndex(
if (index !== -1) {
this.tasks(index).completed = !this.tasks(index).completed;
}
},
},
};
</script>
<style>
/* Styles can be added as per your preference */
</style>
Etapa 4: atualize o App.vue para usar o componente TaskList
No arquivo App.vue principal, simplesmente definimos o componente TaskList. TaskList renderizará toda a lista de tarefas com seus componentes filhos.
<template>
<div >
<TaskList />
</div>
</template>
<script>
import TaskList from './components/TaskList.vue';
export default {
components: {
TaskList,
},
};
</script>
<style>
/* Styles can be added as per your preference */
</style>
Etapa 5: execute o aplicativo
Para ver o aplicativo de gerenciamento de tarefas em ação, você precisa executar o aplicativo. Basta executar o comando abaixo para iniciá-lo.
npm run serve
Quando o aplicativo estiver em execução, você poderá acessá-lo visitando http://localhost:8080. Ao abrir o aplicativo, você verá uma lista de tarefas. Sempre que você clicar na caixa de seleção ao lado de qualquer tarefa, ela será marcada como concluída. Seu status será atualizado de acordo.
Conclusão
$emit desempenha um papel vital no kit de ferramentas dos desenvolvedores Vue.js. Eles oferecem uma maneira de lidar com eventos e facilitar a comunicação entre componentes. Ao adotar as práticas recomendadas e se aprofundar nos recursos dos desenvolvedores $emit, é possível construir aplicativos Vue.js interativos. Explorar e aprimorar continuamente suas habilidades com $emit resultará em um tratamento de eventos mais suave e em uma experiência geral de desenvolvimento aprimorada.
Perguntas frequentes
Como o tratamento de eventos no Vue.js difere do JavaScript padrão?
No JavaScript padrão, a manipulação de eventos envolve o uso de ouvintes de eventos nativos, como addEventListener, para vincular manipuladores de eventos a elementos DOM. No Vue.js, o tratamento de eventos é simplificado por meio de diretivas Vue como @click ou v-on que vinculam diretamente métodos a eventos no modelo. $emit é usado para manipulação de eventos personalizados, permitindo que os componentes se comuniquem entre si em um relacionamento pai-filho.
Quais são algumas práticas recomendadas para usar $ emit?
Algumas práticas recomendadas para usar $emit são usar kebab-case para nomes de eventos personalizados. Você deve escolher nomes de eventos descritivos e significativos. Evite o uso excessivo da propagação de eventos para manter um fluxo de dados claro.
Quais são algumas armadilhas comuns a serem evitadas em eventos personalizados?
Algumas armadilhas comuns a serem evitadas com eventos personalizados são a mutação de adereços diretamente em componentes filhos. O uso excessivo da propagação de eventos leva a um fluxo de dados complexo. Emitir eventos desnecessários que poderiam ser tratados de forma mais eficiente por meio de comunicação direta ou soluções de gerenciamento de estado como o Vuex.
