Vue.JS emettere eventi personalizzati
Vue.JS è un framework versatile e completo per la creazione di enormi applicazioni Web. Qualsiasi applicazione Web è divisa in componenti. Ad esempio, un semplice sito Web che include un'intestazione, la barra laterale e alcuni altri componenti. Al fine di gestire e gestire questo approccio basato sui componenti, Vue.JS offre la relazione genitore-figlio tra i componenti e se vogliamo inviare alcuni dati tra i componenti. Vue.JS offre oggetti di scena per inviare dati dal genitore a un componente figlio ma per inviare dati dal figlio al genitore; Dobbiamo emettere eventi personalizzati. In questo articolo, impariamo a sparare e ascoltare eventi personalizzati.Prima di tutto, vediamo come licenziare un evento personalizzato in Vue.js e poi come ascoltare quell'evento. La sintassi per la licenziamento di un evento in Vue.JS è questo.$ emit ('eventname')
In questa sintassi, dobbiamo stare attenti dando un nome all'evento perché usando lo stesso nome; In seguito ascolteremo questo evento. Per ascoltare questo evento, possiamo ascoltarlo mentre ascoltiamo un evento di clic in VUE.js. Per esempio
Possiamo scrivere qualsiasi espressione nelle virgole invertite e una funzione. Quindi proviamo un esempio per capirlo meglio.
Esempio
Supponiamo di avere un componente chiamato "ParentComponent", che include un componente figlio con il nome di "ChildComponent" a cui stiamo passando un messaggio usando oggetti di scena.
Componente genitore
Componente bambino
Nel componente figlio, stiamo ricevendo oggetti di scena e mostrando il messaggio nel tag "P".
msg
Ora dopo aver impostato questi due componenti. Diciamo ciao al nostro discendente. Per salutare, creeremo prima un pulsante e, con il clic di quel pulsante, chiameremo la funzione "Helloback". Dopo aver creato il pulsante, l'HTML del componente figlio sarebbe così
Messaggio
Creiamo anche la funzione "HellobackFunc" anche nell'oggetto metodi. In cui emetteremo "Hellobackevent" insieme a una variabile "Hellobackvar" che contiene la stringa "Hello Parent". Dopo aver creato una funzione, il javascript del componente figlio sarebbe così
Abbiamo finito con il licenziamento dell'evento. Ora, passiamo al componente genitore per ascoltare l'evento.
Nel componente principale, possiamo semplicemente ascoltare l'evento, proprio come ascoltiamo l'evento click. Ascolteremo semplicemente l'evento nel tag di ChildComponent e chiameremo la funzione "Grazie ()" su di esso.
Nella funzione di ringraziamento, assegneremo la stringa passata alla variabile denominata "ringraziamento". Dopo aver creato la funzione e aver assegnato la stringa passata alla variabile, il javascript del "parentecomponent" sarebbe così
E lega la variabile "ringraziamento" nel modello da qualche parte per vedere che funziona o no.
Componente genitore
ringraziamento
Componente bambino
Dopo aver creato e scritto tutto questo codice, vai alla pagina Web e ricaricalo per ottenere le ultime funzionalità.
Possiamo vedere che gli oggetti di scena vengono trasmessi con successo alla componente del bambino. Ora, se facciamo clic sul pulsante, che è effettivamente nel componente figlio. Il messaggio di ringrazia.
Come puoi vedere, viene visualizzato.
Quindi, è così che possiamo emettere o licenziare gli eventi personalizzati e ascoltarli in qualche altro componente in Vue.js.
Riepilogo
In questo articolo, abbiamo imparato a emettere eventi personalizzati nella Vue.js. Questo articolo contiene un esempio passo dopo passo per capirlo con una breve spiegazione insieme ad esso. Quindi, speriamo che questo articolo aiuti ad avere concetti migliori e chiari di emettere eventi personalizzati in Vue.js. Per ulteriori contenuti utili, continua a visitare Linuxhint.com