So lösen Sie das Problem, zu verhindern, dass das Bubbling von Bindungsereignissen im VUE-Framework fehlschlägt

Im Folgenden werde ich einen Artikel darüber teilen, wie Vue Scroll-Ereignisse überwacht, um die Anzeige bestimmter Elemente als Obergrenze oder feste Position zu realisieren. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

Ein Problem, auf das ich zuvor gestoßen bin, ist, dass das VUE-Framework einige interne Verarbeitungen durchgeführt hat, sodass das Bindungsereignis auch für die neuen Elemente wirksam sein kann, wenn wir beim Rendern des DOM über v-for neue Elemente hinzufügen.

Das dieses Mal aufgetretene Problem besteht darin, dass im ursprünglichen Bindungsereignis (die Funktion wurde nicht in den Methoden der Vue-Instanz geschrieben) das Verhindern des Bubbling-Ereignisses fehlgeschlagen ist. Weder return false noch event.stopPropagation(); sind gültig.

Zu diesem Zeitpunkt müssen Sie den von VUE bereitgestellten Ereignismodifikator verwenden, um damit umzugehen, z. B. um zu verhindern, dass das Ereignis @click.stop='xx()' sprudelt

.stop

.prevent

.capture

.self

.once

<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<p v-on:click.capture="doThis">...</p>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<p v-on:click.self="doThat">...</p>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiel der NodeJS-Methode zum Herstellen einer Verbindung mit der Mongodb-Datenbank

Konfigurieren Sie Vuex in mpvue und speichern Sie es in lokalen Speichergrafiken und Text Tutorial-Analyse

Beispiel für einfache Webserverfunktionen, die von nodejs implementiert werden

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, zu verhindern, dass das Bubbling von Bindungsereignissen im VUE-Framework fehlschlägt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!