Vue 中v - on指令的修饰符（如.prevent、.stop）的作用，如何使用它们处理事件？

前端布洛芬

于 2025-04-04 19:37:05 发布

阅读量824

点赞数 10

分类专栏：大白话前端八股文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_37212162/article/details/147001711

版权

大白话前端八股专栏收录该内容

490 篇文章

订阅专栏

大白花Vue 中v - on指令的修饰符（如.prevent、.stop）的作用，如何使用它们处理事件？

在 Vue 里，v-on指令的修饰符就像是给事件处理添加的小助手，能让事件处理更加灵活和方便。下面就给你详细说说几个常见修饰符的作用和用法。

`.prevent` 修饰符

.prevent 修饰符的作用是阻止事件的默认行为。啥是默认行为呢？比如点击链接时会跳转到新页面，点击表单提交按钮时会提交表单。要是你不想让这些默认行为发生，就可以用 .prevent 修饰符。

以下是个示例代码：

<template>
  <!-- 创建一个表单 -->
  <form @submit.prevent="handleSubmit">
    <!-- 输入框 -->
    <input type="text" v-model="message">
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储输入框的值
      message: ''
    };
  },
  methods: {
    handleSubmit() {
      // 打印输入框的值
      console.log('表单提交内容:', this.message);
    }
  }
};
</script>

在这个例子中，@submit.prevent 表示当表单提交时，阻止表单的默认提交行为，然后执行 handleSubmit 方法。这样就不会因为点击提交按钮而导致页面刷新或者跳转到别的地方。

`.stop` 修饰符

.stop 修饰符的作用是阻止事件冒泡。啥叫事件冒泡呢？简单来说，就是当一个元素上的事件被触发时，这个事件会一层一层向上传递，直到最外层的元素。要是你不想让事件继续往上传递，就可以用 .stop 修饰符。

下面是个示例代码：

<template>
  <!-- 外层盒子，点击时会触发 outerClick 方法 -->
  <div @click="outerClick">
    <!-- 内层按钮，点击时会触发 innerClick 方法，并且阻止事件冒泡 -->
    <button @click.stop="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      // 打印外层盒子被点击的信息
      console.log('外层盒子被点击');
    },
    innerClick() {
      // 打印内层按钮被点击的信息
      console.log('内层按钮被点击');
    }
  }
};
</script>

在这个例子中，@click.stop 表示当点击按钮时，只会触发按钮自身的 innerClick 方法，不会让点击事件继续传递到外层的 div 元素上，从而不会触发 outerClick 方法。

综合使用示例

<template>
  <!-- 外层盒子，点击时会触发 outerClick 方法 -->
  <div @click="outerClick">
    <!-- 表单，提交时阻止默认行为 -->
    <form @submit.prevent="handleSubmit">
      <!-- 输入框 -->
      <input type="text" v-model="message">
      <!-- 提交按钮，点击时阻止事件冒泡 -->
      <button type="submit" @click.stop>提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储输入框的值
      message: ''
    };
  },
  methods: {
    outerClick() {
      // 打印外层盒子被点击的信息
      console.log('外层盒子被点击');
    },
    handleSubmit() {
      // 打印表单提交内容
      console.log('表单提交内容:', this.message);
    }
  }
};
</script>

在这个综合示例中，表单提交时用 .prevent 阻止了默认行为，按钮点击时用 .stop 阻止了事件冒泡，这样就能更精准地控制事件的处理了。

通过这些修饰符，你可以根据实际需求，灵活地控制事件的默认行为和传播，让你的 Vue 应用更加健壮和易于维护。

除了.prevent和.stop，Vue中还有哪些常用的v-on指令修饰符？

在 Vue 里，除了 .prevent 和 .stop ，v-on 指令还有不少常用的修饰符，下面为你详细介绍：

`.capture`

通常情况下，事件是从内向外冒泡的。而 .capture 修饰符能让事件采用捕获模式，也就是事件先从外层元素开始触发，再向内传递到具体触发的元素。

示例代码如下：

<template>
  <!-- 外层 div 使用 .capture 修饰符，点击时先触发 outerClick 方法 -->
  <div @click.capture="outerClick">
    <!-- 内层按钮，点击时触发 innerClick 方法 -->
    <button @click="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层 div 先捕获到点击事件');
    },
    innerClick() {
      console.log('内层按钮被点击');
    }
  }
};
</script>

在这个例子里，点击按钮时，由于外层 div 用了 .capture 修饰符，会先触发 outerClick 方法，然后才触发按钮的 innerClick 方法。

`.self`

.self 修饰符会让事件仅在绑定该事件的元素自身被触发时才执行处理函数，若事件是由子元素冒泡过来的则不会触发。

示例代码如下：

<template>
  <!-- 外层 div 使用 .self 修饰符，只有点击 div 自身时才会触发 outerClick 方法 -->
  <div @click.self="outerClick">
    <!-- 内层按钮，点击时触发 innerClick 方法 -->
    <button @click="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层 div 自身被点击');
    },
    innerClick() {
      console.log('内层按钮被点击');
    }
  }
};
</script>

这里，点击按钮时，事件不会触发外层 div 的 outerClick 方法，因为事件是从子元素（按钮）冒泡过来的；只有直接点击 div 自身时，才会触发 outerClick 方法。

`.once`

.once 修饰符表示事件处理函数仅会执行一次，之后再触发该事件就不会执行处理函数了。

示例代码如下：

<template>
  <!-- 按钮使用 .once 修饰符，点击一次后再点击就不会触发 clickOnce 方法了 -->
  <button @click.once="clickOnce">只点击一次</button>
</template>

<script>
export default {
  methods: {
    clickOnce() {
      console.log('按钮被点击了一次');
    }
  }
};
</script>

在这个例子中，首次点击按钮会触发 clickOnce 方法，之后再点击按钮，clickOnce 方法就不会再执行了。

`.passive`

.passive 修饰符主要用于优化滚动性能。当你在监听滚动事件（如 touchmove）时，使用 .passive 可以告诉浏览器该事件处理函数不会调用 preventDefault() 来阻止默认行为，这样浏览器就能在事件触发时立即执行默认行为，而不用等待事件处理函数执行完，从而提升滚动的流畅度。

示例代码如下：

<template>
  <!-- 外层 div 监听 touchmove 事件并使用 .passive 修饰符 -->
  <div @touchmove.passive="handleTouchMove" style="height: 200px; overflow: auto;">
    <!-- 模拟大量内容 -->
    <p v-for="i in 100" :key="i">{{ i }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchMove() {
      console.log('正在滚动');
    }
  }
};
</script>

在这个例子中，使用 .passive 修饰符监听 touchmove 事件，能让滚动操作更加流畅。

这些修饰符为事件处理提供了更多的灵活性和控制权，能让你依据不同的需求来处理事件。

除了.prevent、.stop和.capture，Vue中还有哪些不常用的v-on指令修饰符？

在 Vue 里，除了 .prevent、.stop 和 .capture 这些常用修饰符，还有一些不太常用的 v-on 指令修饰符，下面为你详细介绍：

`.native`

通常情况下，自定义组件上绑定的事件需要通过 $emit 触发。而 .native 修饰符能让组件像普通 HTML 元素一样监听原生 DOM 事件。

示例代码如下：

<template>
  <!-- 自定义组件，使用 .native 修饰符监听原生的 click 事件 -->
  <MyComponent @click.native="handleClick" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  methods: {
    handleClick() {
      console.log('自定义组件被点击了');
    }
  }
};
</script>

在这个例子中，MyComponent 是一个自定义组件，通过 .native 修饰符，就能监听其原生的 click 事件。

`.sync`

.sync 修饰符是 Vue 2 里的语法糖，用于实现父子组件间的双向数据绑定。在 Vue 3 中，推荐使用 v-model 来替代。

示例代码如下（Vue 2 示例）：

<!-- 父组件 -->
<template>
  <!-- 子组件使用 .sync 修饰符实现双向数据绑定 -->
  <ChildComponent :title.sync="parentTitle" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: '初始标题'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="updateTitle">更新标题</button>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    updateTitle() {
      // 触发 update:title 事件，更新父组件的 title 值
      this.$emit('update:title', '新标题');
    }
  }
};
</script>

在这个例子中，子组件通过 $emit('update:title', newValue) 触发事件，父组件使用 .sync 修饰符能自动更新 parentTitle 的值。

`.left`、`.right`、`.middle`

这些修饰符用于限制鼠标事件的触发按钮。.left 表示只有鼠标左键点击时才触发事件，.right 表示只有鼠标右键点击时才触发事件，.middle 表示只有鼠标中键点击时才触发事件。

示例代码如下：

<template>
  <!-- 按钮使用 .left 修饰符，只有鼠标左键点击时才触发 clickLeft 方法 -->
  <button @click.left="clickLeft">左键点击我</button>
  <!-- 按钮使用 .right 修饰符，只有鼠标右键点击时才触发 clickRight 方法 -->
  <button @click.right="clickRight">右键点击我</button>
  <!-- 按钮使用 .middle 修饰符，只有鼠标中键点击时才触发 clickMiddle 方法 -->
  <button @click.middle="clickMiddle">中键点击我</button>
</template>

<script>
export default {
  methods: {
    clickLeft() {
      console.log('鼠标左键点击');
    },
    clickRight() {
      console.log('鼠标右键点击');
    },
    clickMiddle() {
      console.log('鼠标中键点击');
    }
  }
};
</script>

在这个例子中，不同的按钮使用不同的修饰符，只有对应的鼠标按钮点击时才会触发相应的方法。

`.exact`

.exact 修饰符用于精确控制事件触发的条件，只有在没有同时按下其他修饰键（如 Ctrl、Alt、Shift）时才会触发事件。

示例代码如下：

<template>
  <!-- 按钮使用 .exact 修饰符，只有在没有按下其他修饰键时点击才触发 clickExact 方法 -->
  <button @click.exact="clickExact">精确点击我</button>
</template>

<script>
export default {
  methods: {
    clickExact() {
      console.log('没有按下其他修饰键时点击');
    }
  }
};
</script>

在这个例子中，只有在没有按下 Ctrl、Alt、Shift 等修饰键的情况下点击按钮，才会触发 clickExact 方法。

这些不常用的修饰符在特定场景下能发挥重要作用，帮助你更细致地控制事件的触发和处理。

如何正确地使用Vue中v-on指令修饰符？

在 Vue 里，v-on 指令修饰符可用来精准控制事件的行为。下面为你详细介绍如何正确使用这些修饰符。

1. `.prevent` 修饰符

.prevent 用于阻止事件的默认行为，像表单提交时的页面刷新、链接点击后的跳转等。

示例代码：

<template>
  <!-- 表单使用 @submit.prevent 阻止默认提交行为 -->
  <form @submit.prevent="submitForm">
    <input type="text" v-model="message">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    submitForm() {
      console.log('表单提交内容:', this.message);
    }
  }
};
</script>

解释：这里的 @submit.prevent 让表单提交时不会触发默认的页面刷新操作，而是执行 submitForm 方法。

2. `.stop` 修饰符

.stop 用于阻止事件冒泡，即事件不会再向父元素传递。

示例代码：

<template>
  <!-- 外层 div 点击会触发 outerClick 方法 -->
  <div @click="outerClick">
    <!-- 内层按钮点击使用 @click.stop 阻止事件冒泡 -->
    <button @click.stop="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层 div 被点击');
    },
    innerClick() {
      console.log('内层按钮被点击');
    }
  }
};
</script>

解释：点击按钮时，由于使用了 .stop 修饰符，事件不会传递到外层的 div 元素，所以不会触发 outerClick 方法。

3. `.capture` 修饰符

.capture 能让事件采用捕获模式，即事件先从外层元素开始触发，再向内传递。

示例代码：

<template>
  <!-- 外层 div 使用 @click.capture 采用捕获模式 -->
  <div @click.capture="outerClick">
    <!-- 内层按钮点击触发 innerClick 方法 -->
    <button @click="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层 div 先捕获到点击事件');
    },
    innerClick() {
      console.log('内层按钮被点击');
    }
  }
};
</script>

解释：点击按钮时，因为外层 div 用了 .capture 修饰符，会先触发 outerClick 方法，再触发 innerClick 方法。

4. `.self` 修饰符

.self 使事件仅在绑定该事件的元素自身被触发时才执行处理函数，若事件由子元素冒泡过来则不会触发。

示例代码：

<template>
  <!-- 外层 div 使用 @click.self ，只有点击自身时才触发 outerClick 方法 -->
  <div @click.self="outerClick">
    <!-- 内层按钮点击触发 innerClick 方法 -->
    <button @click="innerClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('外层 div 自身被点击');
    },
    innerClick() {
      console.log('内层按钮被点击');
    }
  }
};
</script>

解释：点击按钮时，事件不会触发外层 div 的 outerClick 方法，只有直接点击 div 自身时才会触发。

5. `.once` 修饰符

.once 表示事件处理函数仅会执行一次，之后再触发该事件就不会执行处理函数了。

示例代码：

<template>
  <!-- 按钮使用 @click.once ，点击一次后再点击不会触发 clickOnce 方法 -->
  <button @click.once="clickOnce">只点击一次</button>
</template>

<script>
export default {
  methods: {
    clickOnce() {
      console.log('按钮被点击了一次');
    }
  }
};
</script>

解释：首次点击按钮会触发 clickOnce 方法，之后再点击按钮，该方法不会再执行。

6. `.passive` 修饰符

.passive 主要用于优化滚动性能，告诉浏览器事件处理函数不会调用 preventDefault() 来阻止默认行为。

示例代码：

<template>
  <!-- 外层 div 监听 touchmove 事件并使用 .passive 修饰符 -->
  <div @touchmove.passive="handleTouchMove" style="height: 200px; overflow: auto;">
    <p v-for="i in 100" :key="i">{{ i }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchMove() {
      console.log('正在滚动');
    }
  }
};
</script>

解释：使用 .passive 修饰符监听 touchmove 事件，能让滚动操作更加流畅。

综合使用多个修饰符

你还可以同时使用多个修饰符，例如：

<template>
  <!-- 表单提交使用 @submit.prevent.stop ，阻止默认行为和事件冒泡 -->
  <form @submit.prevent.stop="submitForm">
    <input type="text" v-model="message">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    submitForm() {
      console.log('表单提交内容:', this.message);
    }
  }
};
</script>

解释：这里的 @submit.prevent.stop 既阻止了表单提交的默认行为，又阻止了事件冒泡。

在使用 v-on 指令修饰符时，要依据具体的业务需求选择合适的修饰符，还可以组合使用多个修饰符来实现更复杂的事件控制。

那么，在实际的项目当中如何正确的使用这些指令修饰符

在实际项目中，正确使用 Vue 的 v - on 指令修饰符能显著提升开发效率和代码质量。以下是不同场景下各修饰符的应用示例：

1. `.prevent` 修饰符

应用场景

当你不想让表单提交触发页面刷新，或者链接点击导致页面跳转时，就可以使用 .prevent 修饰符。

示例代码

在一个用户登录表单里，阻止表单提交的默认行为，使用 AJAX 来处理登录逻辑。

<template>
  <form @submit.prevent="handleLogin">
    <input type="text" v-model="username" placeholder="用户名">
    <input type="password" v-model="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        // 模拟发送登录请求
        const response = await fetch('/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            username: this.username,
            password: this.password
          })
        });
        const result = await response.json();
        if (result.success) {
          console.log('登录成功');
        } else {
          console.log('登录失败');
        }
      } catch (error) {
        console.error('登录请求出错:', error);
      }
    }
  }
};
</script>

解释

在这个例子中，@submit.prevent 阻止了表单提交的默认页面刷新操作，转而执行 handleLogin 方法，该方法通过 fetch 发起 AJAX 请求处理登录逻辑。

2. `.stop` 修饰符

应用场景

当你不希望子元素的事件传递到父元素时，就可以使用 .stop 修饰符。比如在模态框中，点击关闭按钮时不触发模态框的背景点击事件。

示例代码

<template>
  <div class="modal" @click="closeModal">
    <div class="modal-content">
      <h2>模态框标题</h2>
      <p>模态框内容</p>
      <button @click.stop="closeModalDirectly">关闭</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal() {
      console.log('点击模态框背景关闭');
      // 关闭模态框的逻辑
    },
    closeModalDirectly() {
      console.log('点击关闭按钮关闭');
      // 关闭模态框的逻辑
    }
  }
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

解释

这里点击关闭按钮时，由于使用了 .stop 修饰符，事件不会传递到模态框的背景 div 上，从而避免触发 closeModal 方法。

3. `.capture` 修饰符

应用场景

当你需要事件先从外层元素开始触发，再向内传递时，就可以使用 .capture 修饰符。例如在多层嵌套的菜单中，优先处理外层菜单的点击事件。

示例代码

<template>
  <div class="menu" @click.capture="handleOuterMenuClick">
    <div class="sub-menu" @click="handleSubMenuClick">
      <button>子菜单按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOuterMenuClick() {
      console.log('外层菜单点击事件先触发');
    },
    handleSubMenuClick() {
      console.log('子菜单点击事件触发');
    }
  }
};
</script>

<style scoped>
.menu {
  padding: 20px;
  border: 1px solid #ccc;
}

.sub-menu {
  padding: 10px;
  border: 1px solid #999;
}
</style>

解释

点击子菜单按钮时，由于外层菜单使用了 .capture 修饰符，会先触发 handleOuterMenuClick 方法，再触发 handleSubMenuClick 方法。

4. `.self` 修饰符

应用场景

当你只想在元素自身被点击时触发事件，而不是由子元素冒泡过来触发时，就可以使用 .self 修饰符。例如在一个可点击的卡片组件中，点击卡片内容时不触发卡片的点击事件。

示例代码

<template>
  <div class="card" @click.self="handleCardClick">
    <h3>卡片标题</h3>
    <p>卡片内容</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleCardClick() {
      console.log('卡片自身被点击');
    }
  }
};
</script>

<style scoped>
.card {
  padding: 20px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>

解释

点击卡片内的标题或内容时，由于使用了 .self 修饰符，不会触发 handleCardClick 方法，只有直接点击卡片的空白处才会触发。

5. `.once` 修饰符

应用场景

当你希望事件处理函数只执行一次时，就可以使用 .once 修饰符。比如在引导用户操作的提示框中，点击确认按钮后不再显示该提示框。

示例代码

<template>
  <div v-if="showTip">
    <p>这是一个操作提示，请点击确认。</p>
    <button @click.once="confirmTip">确认</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTip: true
    };
  },
  methods: {
    confirmTip() {
      this.showTip = false;
      console.log('提示框已确认，不再显示');
    }
  }
};
</script>

解释

点击确认按钮时，confirmTip 方法会执行一次，之后再点击按钮该方法不会再执行，提示框也会隐藏。

6. `.passive` 修饰符

应用场景

在监听滚动事件（如 touchmove）时，为了优化滚动性能，使用 .passive 修饰符告诉浏览器事件处理函数不会阻止默认行为。

示例代码

<template>
  <div class="scrollable" @touchmove.passive="handleScroll">
    <p v-for="i in 100" :key="i">{{ i }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      console.log('正在滚动');
    }
  }
};
</script>

<style scoped>
.scrollable {
  height: 200px;
  overflow: auto;
}
</style>

解释

在这个滚动容器中，使用 .passive 修饰符监听 touchmove 事件，能让滚动操作更加流畅。

综合使用

在实际项目中，你可能需要同时使用多个修饰符。例如，在一个表单的提交按钮上，同时阻止默认行为和事件冒泡：

<template>
  <form @submit.prevent.stop="submitForm">
    <input type="text" v-model="inputValue">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    submitForm() {
      console.log('表单提交的值:', this.inputValue);
    }
  }
};
</script>