3-20 使用vue的事件修饰符解决阻止冒泡等

最新推荐文章于 2025-01-14 14:10:00 发布

原创最新推荐文章于 2025-01-14 14:10:00 发布 · 394 阅读

1 ·

CC 4.0 BY-SA版权

博客主要讲述使用vue的事件修饰符解决疑似冒泡的多次点击事件触发问题，可参考官方文档。此外，还提到发现一个变量命名工具CodeLF，能解决函数和变量命名烦恼。

使用vue的事件修饰符解决阻止冒泡等

1.排查其他项目的问题，出现疑似冒泡的多次点击事件触发问题，解决方案：

使用了vue的事件修饰符，参考官方文档：

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

2.发现一个变量命名工具
CodeLF
终于不用烦恼函数和变量的命名了