vue3事件修饰符

222 阅读1分钟

  Vue3中的事件修饰符提供了便捷的方式来控制事件的行为,简化了DOM事件的处理。
.prevent修饰符
  阻止浏览器的默认行为,比如表单提交、链接跳转等。手动编写可能会在多个地方重复,而使用修饰符可以简化这一过程。
.stop修饰符
  阻止事件冒泡,阻止事件向上级元素传播。在复杂的嵌套组件结构中,可以防止不必要的全局事件处理。
.self修饰符
  只当事件在该元素自身,而不是它的子元素触发时才触发回调。
.once修饰符
  确保某个事件只触发一次,这对于某些只需要响应一次的交互场景非常有用。
.capture修饰符
  改变事件监听的阶段,使其在捕获阶段触发而不是冒泡阶段。
.passive修饰符
  告诉浏览器,事件处理函数不会阻止事件的默认行为,这样浏览器就可以在事件处理函数执行之前提前开始滚动或其他操作,从而提升用户体验。
.trim (Vue 3 新增)
  对于文本输入事件,自动去除输入值的首尾空白字符。