Come emettere eventi per comunicare tra i componenti di Vue

La strutturazione delle applicazioni Web utilizzando un'architettura a componenti semplifica la creazione e la manutenzione dell'applicazione.

L'emissione di eventi personalizzati è un modo per gestire la comunicazione tra i componenti; oggetti di scena e slot sono altri due. Gli eventi personalizzati consentono di inviare dati dal componente figlio al componente padre.

Emetti eventi da un figlio al suo genitore

Vue offre molte opzioni per comunicare tra i componenti. Un modo significativo di la comunicazione tra i componenti avviene tramite oggetti di scena. Gli oggetti di scena ti consentono di inviare dati dai componenti padre a componenti figlio.

Cosa succede quindi se si desidera inviare dati dal figlio al componente genitore? Vue ti consente di emettere eventi personalizzati da componenti figlio a componenti padre. Questo processo consente al componente padre di utilizzare i dati e le funzioni del componente figlio.

Ad esempio, immagina un componente pulsante con una funzione che restituisce un valore a ogni clic. Sarà necessario emettere quell'evento al componente padre per consentire al componente padre di aggiornare il proprio stato o eseguire un'azione in base al valore restituito.

Convenzione di denominazione per eventi emessi personalizzati in Vue

Prima di approfondire come emettere eventi personalizzati, è necessario comprendere la convenzione di denominazione per gli eventi personalizzati in Vue. Prima che Vue 3 emergesse, gli sviluppatori dovevano definire rigorosamente eventi personalizzati con custodia per kebab, separando le parole nei nomi con un trattino.

Ora è pratica standard definire i tuoi eventi personalizzati in caso di kebab quando lavori con modelli HTML e camelCase quando si lavora con JavaScript. Tuttavia, puoi scegliere di utilizzare qualsiasi opzione quando lavori con JavaScript, poiché Vue compila tutti gli eventi personalizzati in kebab-case.

Quando crei un evento personalizzato, comunica lo scopo dell'evento con un nome descrittivo. Questo è molto importante, soprattutto quando si lavora in gruppo, per chiarire lo scopo dell'evento.

Come emettere eventi personalizzati dal componente figlio al componente padre

Esistono due modi per eseguire l'emissione di eventi personalizzati in Vue. Puoi emettere eventi personalizzati in linea (direttamente nel modello Vue) con il $ emettere metodo fornito da Vue. Puoi anche utilizzare il defineEmits macro disponibile da Vue 3.

Emissione di eventi personalizzati in Vue con il metodo $emit

$ emettere, un metodo Vue integrato, consente a un componente figlio di inviare un evento al componente padre. Chiama questo metodo in linea (all'interno del modello del componente figlio) per attivare l'evento personalizzato. Il metodo $emit accetta due argomenti: il nome dell'evento che si desidera emettere e un payload facoltativo che può contenere dati aggiuntivi.

Considera questo componente figlio che emette un evento per notificare al componente padre il clic di un pulsante:

 ChildComponent.vue 
<copioneimpostare>
import { ref } da 'vue';
const post = ref('')
copione>
<modello>
<div>
<ingressotipo="testo"modello v="inviare">
<pulsantev-on: clic="$emit('pulsante cliccato', post)">Inviarepulsante>
div>
modello>

Questo blocco di codice mostra come emettere un evento personalizzato da un componente figlio. Il figlio inizia inizializzando una variabile post con una stringa vuota.

Il componente figlio lega quindi l'elemento input alla variabile post con v-model, a Direttiva Vue data binding. Questa associazione consente le modifiche apportate al campo di input per aggiornare automaticamente la variabile del post.

L'elemento button ha una direttiva v-on che ascolta gli eventi click sul pulsante. Il clic sul pulsante chiama il metodo $emit con due argomenti: il nome dell'evento, "clic sul pulsante" e il valore della variabile post.

Il componente padre può ora ascoltare l'evento personalizzato con la direttiva v-on per gestire gli eventi in Vue:

 ParentComponent.vue 
import { ref } da "vue";
importare ChildComponent da "./components/ChildComponent.vue";
const postLista = ref([])
const addPosts = (post) => {
 postList.value.push (post)
}
copione>
<modello>
<div>
<Componente figlio @clic sul pulsante="aggiungiPost"/>
<Ul>
<liv-per="post in postList">{{ inviare }}li>
Ul>
div>
modello>

Questo blocco di codice mostra un componente padre che importa e utilizza il componente figlio di prima. Il componente padre definisce a postList variabile di matrice come riferimento reattivo. Il componente definisce quindi un addPosts funzione che viene eseguita, prendendo a inviare discussione. La funzione aggiunge un nuovo post all'array postList con il spingere() metodo.

IL @pulsante cliccato il listener di eventi acquisisce l'evento personalizzato the Componente figlio emette quando si fa clic sul pulsante. Questo evento determina l'esecuzione della funzione addPosts. Infine, il blocco di codice allega il file v-per direttiva per elenchi di rendering in Vue all'elemento ul per scorrere l'array postList.

Emissione di eventi con la macro defineEmits

Vue 3 ha introdotto il defineEmits macro, che definisce esplicitamente gli eventi che un componente può emettere. Questa macro fornisce un modo indipendente dai tipi per emettere eventi che portano a una base di codice più strutturata.

Ecco un esempio di come puoi utilizzare la macro defineEmits e chiamarla nel tuo componente figlio:

 ChildComponent.vue 
<copioneimpostare>
import { ref } da "vue";
const emit = defineEmits(["pulsante cliccato"]);
const post = ref("");
const buttonClic = () => {
 emit("pulsante cliccato", post.value);
};
copione>
<modello>
<div>
<ingressotipo="testo"modello v="inviare" />
<pulsantev-on: clic="pulsanteClic">Inviarepulsante>
div>
modello>

Mentre la funzionalità rimane la stessa, ci sono differenze significative nella sintassi del codice tra il blocco di codice precedente e quello con il $ emettere funzione.

In questo blocco di codice, il defineEmits macro definisce il clic sul pulsante evento. Chiamando questa macro, il blocco di codice restituisce una funzione $emit, che consente di emettere gli eventi definiti. L'array passato alla macro defineEmits all'interno del componente conterrà tutti gli eventi che devi emettere al componente padre.

Successivamente, il blocco di codice definisce a pulsanteClic funzione. Questa funzione invia l'evento clic sul pulsante e la variabile post al componente principale. Il blocco modello del componente figlio ospita un elemento pulsante.

L'elemento pulsante ha un v-on: clic direttiva che attiva la funzione buttonClick. Il componente genitore può quindi utilizzare il componente figlio nello stesso modo in cui lo faceva con il metodo $emit.

Gli sviluppatori di Vue beneficiano di un'architettura basata su componenti

Puoi comunicare da un componente figlio al suo genitore emettendo eventi utilizzando il metodo $emit e la macro defineEmits.

Puoi trarre vantaggio dall'architettura basata su componenti di Vue in quanto ti consente di scrivere codice più strutturato e conciso. Con i moderni framework JavaScript come Vue, puoi utilizzare Web Components, uno standard Web W3C, per ottenere questa architettura basata su componenti.