VUE事件修饰符

在Vue中，事件修饰符是一种技术，可以增强绑定到DOM事件上的行为。修饰符是指以点号(.)分隔的特殊后缀，通过将修饰符添加到事件名称中，可以修改事件触发的方式。

 

Vue事件修饰符

1. .stop

.stop是Vue中最常用的事件修饰符之一。它会阻止事件进一步传播到DOM树。例如：

 

<template>
 <div @click="outerHandler">
     <div @click.stop="innerHandler">
     </div>
 </div>
</template>
<script>
  export default {
   methods: {
    innerHandler() {
    // 在此处理部点击事件
     },
    outerHandler() {
// 在此处理外部点击事件
    },
  },
 };
</script>

在上面的代码中，当用户单击`<div @click.stop="innerHandler">`时，事件将立即停止传播，不再执行`outerHandler`方法。相反，它只会执行`innerHandler`方法。

2、 .prevent

防止默认操作很重要，有时候特别需要这个方式避免浏览器自动跳转到另一个页面。`.prevent`事件修饰符用于防止元素的默认行为。例如：

<template> 
   <form @submit.prevent="submitHandler">
     <!-- form表单内容 --> 
   </form>
</template>
<script>
  export default {
   methods: {
     submitHandler() {
       // 此处处理提交表单的逻辑
     },
    },
   };
</script>

 当用户单击“提交”按钮时，`.prevent`修饰符将阻止默认行为。这意味着表单不会自动提交到服务器，而是等待Vue处理提交。

3、.capture

`.capture`事件修饰符会将事件处理推回DOM树的顶部，从外层开始一次执行。例如

 

<template> 
  <div @click.capture="outerHandler"> 
    <div @click="innerHandler"></div>
  </div>
</template>
<script>
  export default {
    methods: {
      innerHandler(){// 在此处处理内部点击事件
      },
      outerHandler() {// 在此处处理外部点击事件 
      },
    },
  };
</script>

在上面的代码中，`.capture`先执行外层元素的`outerHandler`方法，再执行内层元素的`innerHandler`方法。和上文的**.stop**不同在于，`.stop`跳过未执行的父级处理程序，直接停止事件传播。

4、.self

`.self`事件修饰符仅在事件发生在目标对象时触发处理事件。例如：

<template>
 <div @click.self="clickHandler"><!-- div内容 --></div>
</template>
<script> 
  export default {
    methods: { 
      clickHandler() {
        // 在此处处理点击事件
         },
        },
      };
</script>

在上面的代码中，只有当用户单击`<div>`本身，才会触发事件处理程序。如果用户单击`<div>`的子元素，则不会执行事件处理程序。

5、.once

`.once`事件修饰符让句柄只在元素触发时执行一次。例如：

<template>
 <button @click.once="clickHandler">点击我</button>
</template>
<script> 
  export default {
    methods: { 
      clickHandler() {
            // 在此处处理点击事件
          },
        },
      };
</script>

在上面的代码中，当用户单击按钮后，Vue将只调用一次`clickHandler`方法。这对于避免重复提交表单等情况非常有用。