Vue.js Benutzerdefinierte Ereignisse ausgeben

Vue.js ist ein vielseitiges und vollwertiges Framework zum Erstellen riesiger Webanwendungen. Jede Webanwendung ist in die Komponenten unterteilt. Zum Beispiel eine einfache Website, die eine Kopfzeile, eine Seitenleiste und einige andere Komponenten enthält. Um diesen komponentenbasierten Ansatz zu verwalten und zu handhaben, hat Vue.js bietet die Eltern-Kind-Beziehung zwischen den Komponenten und wenn wir einige Daten zwischen Komponenten senden möchten. Vue.js bietet Requisiten zum Senden von Daten vom übergeordneten Element an eine untergeordnete Komponente, aber zum Senden von Daten vom untergeordneten Element an das übergeordnete Element; wir müssen benutzerdefinierte Ereignisse ausgeben. In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Ereignisse auslösen und abhören.Sehen wir uns zunächst an, wie Sie ein benutzerdefiniertes Ereignis in Vue auslösen.js und dann, wie man sich dieses Ereignis anhört. Die Syntax zum Auslösen eines Ereignisses in Vue.js ist

In dieser Syntax müssen wir vorsichtig sein, wenn wir dem Ereignis einen Namen geben, da derselbe Name verwendet wird; wir werden uns dieses Ereignis später anhören. Um dieses Ereignis zu hören, können wir es wie ein Klickereignis in Vue anhören.js. Beispielsweise

Wir können jeden Ausdruck in Anführungszeichen schreiben sowie eine Funktion. Versuchen wir es mit einem Beispiel, um es besser zu verstehen.

Beispiel

Angenommen, wir haben eine Komponente namens "parentComponent", die eine untergeordnete Komponente mit dem Namen "childComponent" enthält, an die wir eine Nachricht mit Hilfe von Props übergeben.

In der untergeordneten Komponente erhalten wir Requisiten und zeigen die Nachricht im 'p'-Tag.

Nachdem Sie diese beiden Komponenten eingerichtet haben. Sagen wir hallo zurück zu unserer ParentComponent. Um Hallo zurück zu sagen, erstellen wir zuerst eine Schaltfläche, und beim Klicken auf diese Schaltfläche rufen wir die Funktion "helloBack" auf. Nach dem Erstellen der Schaltfläche sieht der HTML-Code der untergeordneten Komponente so aus

Lassen Sie uns auch die Funktion „helloBackFunc“ im Methodenobjekt erstellen. In dem wir das „helloBackEvent“ zusammen mit einer „helloBackVar“-Variable ausgeben, die die Zeichenfolge „Hello Parent“ enthält. Nach dem Erstellen einer Funktion würde das Javascript der untergeordneten Komponente so aussehen

Wir sind fertig mit dem Auslösen des Events. Gehen wir nun zur übergeordneten Komponente über, um das Ereignis abzuhören.

In der Parent-Komponente können wir das Ereignis einfach abhören, genau wie wir das Click-Ereignis abhören. Wir hören einfach auf das Ereignis im Tag der ChildComponent und rufen die Funktion „thanks()“ darauf auf.