Benutzerdefinierte Vue-Komponenten verwenden Ereignismodifikatoren, um auf den Pit-Rekord zu treten

Vorwort

Als ich heute eine selbstgeschriebene Komponente verwendete, stieß ich plötzlich auf ein lange vermisstes Blasenereignis. Ich dachte daran, Vues eigenen Ereignismodifikator (.stop) zu verwenden. Ich dachte, ich könnte das Blasenproblem lösen, aber ich stieß auf dieses Problem.

Viele Fragezeichen in Ihrem Kopf? ? ? ? Was zur Hölle ist das? Ich habe es gemäß der Vue-Dokumentation geschrieben (Blut erbrechen)

Also machte ich mich auf die Suche nach einer Lösung des Problems.

Routinemäßige Programmiervorgänge:

Öffnen Sie den Browser und suchen Sie auf Baidu/Google. Ich habe festgestellt, dass es viele Dinge gibt, aber keines davon kann mein Problem lösen. Ich habe keine andere Wahl, als in die Vue-Dokumentation zu schauen! ! ! !
Ich habe die Vue-Dokumentation mindestens Dutzende Male gelesen und dachte, ich hätte nichts übersehen. Ich war mir sicher, dass die Vue-Dokumentation keine Antwort auf dieses Problem enthielt. Ich habe intensiv gesucht und bin hierher gekommen

Äh? Dieses event.stopPropagation()? ? ?

Plötzlich kam mir eine Idee! ! ! !

Da event.stopPropagation() ausgelöst werden kann, kann ich das Ereignis übergeben und das Problem kann gelöst werden. Tun Sie es einfach! !

Beginnen Sie mit der Amateurcode -Änderung

Verwenden Sie benutzerdefinierte Komponenten wie folgt:

Schauen wir uns die Konsolenausgabe an

Das ist es! ! ! ! ! Aber warum wird es zweimal ausgegeben? ? ? ? Ich dachte, ich könnte es einfach lösen, aber dann erwachte eine seltsame Neugier in mir.

Beginnen Sie die Reise, um den Fehler zu finden, der zweimal ausgelöst wurde

Ich habe versucht, den Modifikator .once hinzuzufügen, aber es hat nicht funktioniert. Ich habe noch ein paar Mal geklickt und festgestellt, dass er zweimal ausgelöst wurde.

So seltsam! Was zur Hölle ist das! ! ! !

Beim weiteren Versuch, den Vue-Ereignismodifikator .once zu verwenden, wurde die folgende Ausgabe angezeigt

Es kann zwar nur einmal ausgelöst werden, aber warum wird beim ersten Mal zweimal gedruckt? ! ! (schwach)

Das Problem wurde nicht vollständig gelöst. Suchen Sie weiter. . . .

Überprüfen Sie den Druckzeitstempel (timeStamp), sie werden alle gleichzeitig ausgelöst, das ist nicht einfach

Weiter mit Ihrem Browser suchen

Mir kam die Inspiration: Wie wäre es, mit „setTimeout“ zu erzwingen, dass es nur einmal ausgelöst wird?

Codetransformation starten

Okay, schauen wir uns die Wirkung an

Erfolg! ! ! ! Alle Schwierigkeiten auf dem Weg wurden gelöst! ! !

Zusammenfassen

Dies ist das Ende dieses Artikels über benutzerdefinierte Vue-Komponenten mit Ereignismodifikatoren. Weitere relevante Inhalte zu Vue mit Ereignismodifikatoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!