Vue.Js emittieren benutzerdefinierte Ereignisse

Vue.JS ist ein vielseitiger und vollwertiger Rahmen für den Aufbau großer Webanwendungen. Jede Webanwendung ist in die Komponenten unterteilt. Zum Beispiel eine einfache Website, die eine Header, eine Seitenleiste und einige andere Komponenten enthält. Um diesen komponentenbasierten Ansatz zu verwalten und zu behandeln, Vue.JS bietet die Eltern-Kind-Beziehung zwischen den Komponenten und wenn wir einige Daten über Komponenten hinweg senden möchten. Vue.JS bietet Requisiten an, um Daten vom Elternteil an eine untergeordnete Komponente zu senden, aber Daten vom Kind an den Elternteil zu senden. Wir müssen benutzerdefinierte Ereignisse abgeben. In diesem Artikel lernen wir über das Feuer und das Hören benutzerdefinierter Ereignisse kennen.Lassen Sie uns zunächst sehen, wie man ein benutzerdefiniertes Ereignis in Vue abfeuert.JS und dann wie man dieses Ereignis anhört. Die Syntax zum Abfeuern eines Ereignisses in Vue.JS ist das.$ emit ('eventname')

In dieser Syntax müssen wir vorsichtig sein, während wir dem Ereignis einen Namen geben, da derselbe Name verwendet wird. Wir werden später dieses Ereignis anhören. Um dieses Ereignis anzuhören, können wir sie mir anhören, während wir ein Click -Event in Vue anhören.JS. Zum Beispiel

Wir können jeden Ausdruck sowohl in die umgekehrten Kommas als auch in eine Funktion schreiben. Versuchen wir also ein Beispiel, um es besser zu verstehen.

Beispiel

Angenommen, wir haben eine Komponente mit dem Namen „Parent Component“, die eine untergeordnete Komponente mit dem Namen „Child Component“ enthält, an den wir eine Nachricht mit Requisiten verabschieden.

In der Kinderkomponente erhalten wir Requisiten und zeigen die Nachricht im 'P' Tag an.

Nachdem diese beiden Komponenten eingerichtet wurden. Lassen Sie uns unseren Elternkomponenten Hallo sagen. Um Hallo zu sagen, werden wir zuerst eine Schaltfläche erstellen, und beim Klicken auf diese Schaltfläche werden wir die Funktion „Helloback“ aufrufen. Nach dem Erstellen der Schaltfläche wäre das HTML der untergeordneten Komponente so

Erstellen wir auch die Funktion „Hellobackfunc“ im Methodenobjekt. In dem wir das "Hellobackevent" zusammen mit einer "Hellobackvar" -Variable aussagen, die die Zeichenfolge "Hallo Eltern" enthält. Nach dem Erstellen einer Funktion würde das JavaScript der untergeordneten Komponente so sein

Wir sind mit der Entlassung der Veranstaltung fertig. Wechseln Sie nun zur übergeordneten Komponente, um das Ereignis zu hören.

In der übergeordneten Komponente können wir einfach das Ereignis anhören, genau wie wir das Click -Ereignis anhören. Wir werden einfach die Veranstaltung im Tag des ChildComponent anhören und die Funktion „Danke ()“ darauf nennen.