Comment résoudre le problème de la prévention de l'échec du bouillonnement des événements de liaison dans le framework VUE

Ci-dessous, je partagerai avec vous un article sur la façon dont Vue surveille les événements de défilement pour réaliser un affichage au plafond ou à position fixe de certains éléments. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Un problème que j'ai rencontré plus tôt est que le framework VUE a effectué un traitement interne de sorte que lorsque nous ajoutons de nouveaux éléments lors du rendu du DOM via v-for, l'événement de liaison peut également être efficace pour les nouveaux éléments.

Le problème rencontré cette fois est que dans l'événement de liaison d'origine (la fonction n'a pas été écrite dans les méthodes de l'instance vue), empêchant l'événement de bouillonnement d'avoir échoué. Ni return false ni event.stopPropagation();

À ce stade, vous devez utiliser le modificateur d'événement fourni par VUE pour le gérer, par exemple empêcher l'événement de bouillonner @click.stop='xx()'

.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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Exemple de méthode nodejs pour se connecter à la base de données mongodb

Configurer vuex dans mpvue et le conserver dans les graphiques de stockage locaux et texte Analyse du tutoriel

Exemple de fonctions de serveur Web simples implémentées par nodejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!