emit in Vue.js

L’emit In Vue.js, è un metodo utilizzato per la comunicazione tra componenti figli e genitori. Infatti, consente ai componenti figli di inviare eventi al loro componente genitore.

Possiamo descrivere il funzionamento di emit attraverso queste fasi.

Emitting (Emissione): Nel componente figlio, si può chiamare il metodo $emit per emettere un evento. All’evento si può passare un nome e anche dei dati (opzionali).

Listening (Ascolto): Nel componente genitore, si possono ascoltare gli eventi emessi dal componente figlio utilizzando direttive come v-on o l’abbreviazione @.

Handling (Gestione): Nel componente genitore, si definisce un metodo per gestire l’evento ricevuto dal componente figlio. Questo metodo viene chiamato quando l’evento è emesso dal componente figlio e riceve eventuali dati associati.

Quindi, l’emit in Vue.js è un meccanismo che consente ai componenti figli di comunicare con il loro componente genitore, inviando eventi che possono contenere anche dati.

Esempio di emit in Vue.js

Creiamo nel componente figlio un pulsante che, quando cliccato, attiva il metodo inviaDati. All’interno di questo metodo, definiamo una variabile data contenente i dati che desideriamo passare al componente genitore. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'inviaDati' e passiamo data come parametro dell’evento.

Ecco come si presenta il componente figlio:

<template>
    <div>
      <button @click="inviaDati">Invia Dati</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChildComponent',
    methods: {
        inviaDati() {
        const data = 'Ciao a tutti';
        this.$emit('inviaDati', data);
      }
    }
  };
  </script>

Poi creiamo il componente padre doce includiamo il componente figlio ChildComponent utilizzando <ChildComponent @inviaDati ="handleInviaDati" />. In questo modo, il genitore è in grado di ascoltare l’evento 'inviaDati' emesso dal componente figlio. Quando questo evento viene emesso, viene eseguita la funzione handleInviaDati che riceve i dati passati dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedData del componente genitore con i dati ricevuti dal componente figlio. Questa variabile viene poi visualizzata nel template del componente genitore.

Ecco quindi il componente genitore:

<template>
  <div>
    <h1>Parent Component</h1>
    <p>{{ receivedData }}</p>
    <ChildComponent @inviaDati="handleInviaDati" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleInviaDati(data) {
      this.receivedData = data;
    }
  }
};
</script>

Passare un array con emit in Vue.js

Nel componente figlio, creiamo un pulsante che, quando cliccato, attiva il metodo passArray. All’interno di questo metodo, definiamo un array frutta che contiene alcuni frutti. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'arrayEmesso' e passiamo l’array frutta come parametro dell’evento.

<template>
  <div>
    <button @click="passArray">Passa Array</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    passArray() {
      const frutta = ['Mela', 'Pera', 'Banana'];
      this.$emit('arrayEmesso', frutta);
    }
  }
};
</script>

Dopo nel componente padre includiamo il componente figlio utilizzando <ChildComponent @arrayEmesso="handleArray" />. In questo modo, il genitore è in grado di ascoltare l’evento 'arrayEmesso' emesso dal componente figlio ChildComponent. Quando questo evento viene emesso, viene eseguita la funzione handleArray, che riceve l’array passato dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedArray del componente genitore con l’array ricevuto dal componente figlio. Questa variabile viene quindi visualizzata nel template del componente genitore.

Ecco come si presenta dunque il componente figlio:

<template>
  <div>
    <h1>Parent Component</h1>
    <p v-if="receivedArray.length > 0">Array ricevuto dal figlio:</p>
    <ul>
      <li v-for="(item, index) in receivedArray" :key="index">{{ item }}</li>
    </ul>
    <ChildComponent @arrayEmesso="handleArray" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedArray: []
    };
  },
  methods: {
    handleArray(array) {
      this.receivedArray = array;
    }
  }
};
</script>

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Passare un oggetto con emit in Vue.js

Ecco un esempio completo su come passare un oggetto da un componente figlio ad un componente genitore utilizzando l’emit in Vue.js. In questo componente figlio, abbiamo un pulsante che, quando cliccato, attiva il metodo passObject. All’interno di questo metodo, definiamo un oggetto dataObject con alcune proprietà. Quindi, utilizziamo il metodo $emit per emettere un evento chiamato 'objectEmesso' e passiamo l’oggetto dataObject come parametro dell’evento.

<template>
    <div>
      <button @click="passObject">Passa Oggetto Persona</button>
    </div>
</template>
  
<script>
export default {
    name: 'ChildComponent',
    methods: {
      passObject() {
        const persona = {
          name: 'Paperina',
          age: 30,
          email: 'paperina@example.com'
        };
        this.$emit('objectEmesso', persona);
      }
    }
 };
</script>

Nel componente genitore poi includiamo il componente figlio utilizzando <ChildComponent @objectEmesso="handleObject" />. In questo modo, il genitore è in grado di ascoltare l’evento 'objectEmesso' emesso dal componente figlio ChildComponent. Quando questo evento viene emesso, viene eseguita la funzione handleObject, che riceve l’oggetto passato dal componente figlio come parametro. In questo caso, stiamo semplicemente aggiornando la variabile receivedObject del componente genitore con l’oggetto ricevuto dal componente figlio. Questo oggetto viene quindi visualizzato nel template del componente genitore.

<template>
  <div>
    <h1>Parent Component</h1>
    <p v-if="receivedObject">Oggetto ricevuto dal figlio:</p>
    <ul v-if="receivedObject">
      <li v-for="(value, key) in receivedObject" :key="key">{{ key }}: {{ value }}</li>
    </ul>
    <ChildComponent @objectEmesso="handleObject" />
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedObject: null
    };
  },
  methods: {
    handleObject(object) {
      this.receivedObject = object;
    }
  }
};
</script>

Conclusioni

In conclusione, l’uso di emit in Vue.js è un modo potente per i componenti figli di comunicare con il loro componente genitore. Questo meccanismo consente di trasmettere eventi personalizzati da un componente figlio al suo componente genitore, consentendo una comunicazione bidirezionale all’interno dell’applicazione.

Alcuni punti chiave sull’utilizzo di emit includono:

Comunicazione efficace: emit consente una comunicazione fluida tra i componenti, consentendo loro di scambiarsi informazioni e azioni rilevanti.
Eventi personalizzati: Gli eventi emessi possono essere personalizzati con nomi significativi che descrivono l’azione o l’evento che si verifica nel componente figlio.
Dati opzionali: È possibile includere dati aggiuntivi nell’emissione dell’evento, permettendo al componente genitore di ricevere informazioni utili dal componente figlio.
Gestione degli eventi: Nel componente genitore, è possibile ascoltare gli eventi emessi dal componente figlio e definire le funzioni di gestione degli eventi per elaborare i dati ricevuti.
Aggiornamento dello stato: I dati ricevuti tramite emit possono essere utilizzati per aggiornare lo stato del componente genitore, consentendo una reattività dinamica nell’applicazione.

In conclusione, emit è uno strumento essenziale per la comunicazione tra componenti in Vue.js, che contribuisce a creare un’architettura modulare e flessibile per le applicazioni Vue.js.

>> props con Composition API

slot di Vue.js >>