MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue中事件修饰符的灵活运用

2024-04-234.4k 阅读

Vue 事件修饰符简介

在 Vue 开发中，事件修饰符是非常实用的特性。Vue 允许我们在处理 DOM 事件时使用修饰符来实现一些常见的 DOM 事件处理场景，从而简化代码并提升开发效率。事件修饰符以点 . 指明，紧跟在指令的名称之后。

常用事件修饰符

.stop

  1. 作用：阻止事件冒泡。在 DOM 事件模型中，事件会从触发元素开始向上冒泡到父元素，.stop 修饰符可以阻止这种冒泡行为。
  2. 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div @click="handleOuterClick">
      Outer div
      <button @click.stop="handleButtonClick">Click me</button>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleOuterClick() {
          console.log('Outer div clicked');
        },
        handleButtonClick() {
          console.log('Button clicked');
        }
      }
    });
  </script>
</body>
</html>

在上述代码中，当点击按钮时，handleButtonClick 方法会被调用，并且由于按钮的点击事件使用了 .stop 修饰符，事件不会冒泡到外层的 div，所以 handleOuterClick 方法不会被触发。

.prevent

  1. 作用：阻止事件的默认行为。例如，在表单提交时，默认会刷新页面，使用 .prevent 可以阻止这种默认行为。
  2. 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="inputValue">
      <button type="submit">Submit</button>
    </form>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {
        handleSubmit() {
          console.log('Form submitted, value:', this.inputValue);
        }
      }
    });
  </script>
</body>
</html>

这里，表单的 submit 事件使用了 .prevent 修饰符，所以当点击提交按钮时，页面不会刷新，而是执行 handleSubmit 方法。

.capture

  1. 作用：使用事件捕获模式。在 DOM 事件流中，有捕获阶段和冒泡阶段。通常事件处理是在冒泡阶段进行的，而使用 .capture 修饰符可以让事件在捕获阶段处理。
  2. 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div @click.capture="handleOuterClick">
      Outer div
      <div @click="handleInnerClick">Inner div</div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleOuterClick() {
          console.log('Outer div click captured');
        },
        handleInnerClick() {
          console.log('Inner div clicked');
        }
      }
    });
  </script>
</body>
</html>

当点击内部 div 时，先触发外层 div 的捕获阶段事件 handleOuterClick，然后再触发内部 div 的冒泡阶段事件 handleInnerClick。

.self

  1. 作用：只当事件在该元素本身（而不是子元素）触发时触发回调。
  2. 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div @click.self="handleOuterClick">
      Outer div
      <div @click="handleInnerClick">Inner div</div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleOuterClick() {
          console.log('Outer div clicked by itself');
        },
        handleInnerClick() {
          console.log('Inner div clicked');
        }
      }
    });
  </script>
</body>
</html>

当点击内部 div 时，只有 handleInnerClick 方法会被调用，因为点击事件不是直接在外部 div 本身触发的。只有直接点击外部 div 时，handleOuterClick 方法才会被调用。

.once

  1. 作用：事件只触发一次。这在一些只需要执行一次的操作场景中非常有用，比如初始化操作。
  2. 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click.once="handleClick">Click me once</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick() {
          console.log('Button clicked');
        }
      }
    });
  </script>
</body>
</html>

无论点击按钮多少次，handleClick 方法只会被调用一次。

组合使用事件修饰符

在实际开发中，我们经常需要组合使用多个事件修饰符来满足复杂的业务需求。

  1. 示例 1：阻止表单提交并只触发一次
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <form @submit.prevent.once="handleSubmit">
      <input type="text" v-model="inputValue">
      <button type="submit">Submit</button>
    </form>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      },
      methods: {
        handleSubmit() {
          console.log('Form submitted, value:', this.inputValue);
        }
      }
    });
  </script>
</body>
</html>

在这个例子中，表单的 submit 事件同时使用了 .prevent 和 .once 修饰符。.prevent 阻止了表单的默认提交行为，.once 确保 handleSubmit 方法只被调用一次。

  1. 示例 2：捕获并阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <div @click.capture.stop="handleOuterClick">
      Outer div
      <div @click="handleInnerClick">Inner div</div>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleOuterClick() {
          console.log('Outer div click captured and stopped bubbling');
        },
        handleInnerClick() {
          console.log('Inner div clicked');
        }
      }
    });
  </script>
</body>
</html>

这里外层 div 的点击事件使用了 .capture 和 .stop 修饰符。.capture 让事件在捕获阶段处理，.stop 阻止了事件冒泡，所以当点击内部 div 时，只会触发外层 div 的捕获阶段事件，不会触发内部 div 的冒泡阶段事件。

在组件中的事件修饰符应用

  1. 自定义组件事件修饰符 在 Vue 组件中，我们也可以使用事件修饰符。对于自定义事件，Vue 提供了 .sync 修饰符，用于实现父子组件间双向数据绑定的语法糖。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <child-component :value.sync="parentValue"></child-component>
    <p>Parent value: {{ parentValue }}</p>
  </div>
  <template id="child-component-template">
    <div>
      <input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
    </div>
  </template>
  <script>
    Vue.component('child-component', {
      template: '#child-component-template',
      props: ['value']
    });
    new Vue({
      el: '#app',
      data: {
        parentValue: ''
      }
    });
  </script>
</body>
</html>

在这个例子中，child-component 中的 input 元素通过 @input 事件触发 update:value 自定义事件，并传递新的值。父组件通过 :value.sync 语法，当子组件触发 update:value 事件时，自动更新 parentValue。

  1. 组件事件的阻止冒泡与捕获 在组件间传递事件时，也可以使用 .stop 和 .capture 修饰符。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <parent-component @child-event.stop="handleParentEvent">
      <child-component @click="handleChildClick"></child-component>
    </parent-component>
  </div>
  <template id="parent-component-template">
    <div @click="handleParentClick">
      Parent component
      <slot></slot>
    </div>
  </template>
  <template id="child-component-template">
    <div @click="handleChildComponentClick">
      Child component
    </div>
  </template>
  <script>
    Vue.component('parent-component', {
      template: '#parent-component-template',
      methods: {
        handleParentClick() {
          console.log('Parent component clicked');
        },
        handleParentEvent() {
          console.log('Parent event from child received');
        }
      }
    });
    Vue.component('child-component', {
      template: '#child-component-template',
      methods: {
        handleChildComponentClick() {
          console.log('Child component clicked');
          this.$emit('child-event');
        }
      }
    });
    new Vue({
      el: '#app',
      methods: {
        handleChildClick() {
          console.log('Child click event handled in parent');
        }
      }
    });
  </script>
</body>
</html>

在上述代码中，child-component 触发 child-event 事件，由于在 parent-component 上使用了 .stop 修饰符，该事件不会继续向上冒泡，所以 handleParentEvent 方法会被调用，但不会触发父组件的其他冒泡相关逻辑。

深入理解事件修饰符原理

  1. 事件绑定机制 Vue 使用 addEventListener 来绑定 DOM 事件。当我们在模板中使用 @click 等指令时，Vue 会在组件挂载时将相应的事件处理函数绑定到 DOM 元素上。
// 简化的 Vue 事件绑定原理代码
function bindEvent(el, eventName, handler) {
  el.addEventListener(eventName, handler);
}
  1. 修饰符的实现 对于 .stop 修饰符，Vue 内部在事件处理函数中调用 event.stopPropagation() 来阻止事件冒泡。
function stopModifierHandler(event, originalHandler) {
  event.stopPropagation();
  originalHandler(event);
}

对于 .prevent 修饰符，Vue 在事件处理函数中调用 event.preventDefault() 来阻止事件的默认行为。

function preventModifierHandler(event, originalHandler) {
  event.preventDefault();
  originalHandler(event);
}

对于 .capture 修饰符，addEventListener 的第三个参数设置为 true，表示使用捕获模式。

function captureBindEvent(el, eventName, handler) {
  el.addEventListener(eventName, handler, true);
}

对于 .self 修饰符，在事件处理函数中判断 event.target 是否是绑定事件的元素本身。

function selfModifierHandler(event, originalHandler) {
  if (event.target === event.currentTarget) {
    originalHandler(event);
  }
}

对于 .once 修饰符，Vue 内部会在事件处理函数执行后，移除事件监听器。

function onceModifierHandler(el, eventName, handler) {
  function onceHandler(event) {
    handler(event);
    el.removeEventListener(eventName, onceHandler);
  }
  el.addEventListener(eventName, onceHandler);
}

实际项目中的应用场景

  1. 表单交互 在表单验证和提交场景中，.prevent 修饰符经常用于阻止表单的默认提交行为，以便我们可以进行自定义的验证逻辑。
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="username" required>
    <input type="password" v-model="password" required>
    <button type="submit">Submit</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    submitForm() {
      if (this.username && this.password) {
        // 进行登录逻辑
        console.log('Logging in with', this.username, this.password);
      } else {
        console.log('Please fill in all fields');
      }
    }
  }
};
</script>
  1. 模态框操作 在模态框中，我们可能希望点击模态框外部关闭模态框，但点击模态框内部内容时不关闭。这时可以使用 .self 修饰符。
<template>
  <div class="modal" @click.self="closeModal">
    <div class="modal-content">
      <p>Modal content</p>
      <button @click="closeModal">Close</button>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    closeModal() {
      // 关闭模态框逻辑
      console.log('Modal closed');
    }
  }
};
</script>
  1. 页面初始化交互 在页面加载完成后，可能需要执行一些只执行一次的操作，比如初始化第三方插件。这时可以使用 .once 修饰符。
<template>
  <div @load.once="initPlugin">
    <!-- 页面内容 -->
  </div>
</template>
<script>
export default {
  methods: {
    initPlugin() {
      // 初始化第三方插件逻辑
      console.log('Plugin initialized');
    }
  }
};
</script>

与原生 JavaScript 事件处理对比

  1. 语法简洁性 原生 JavaScript 绑定事件需要获取 DOM 元素并使用 addEventListener 方法，代码相对繁琐。
// 原生 JavaScript 绑定事件
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Button clicked');
});

而在 Vue 中，使用 @click 指令结合事件修饰符，代码更加简洁直观。

<button @click="handleClick">Click me</button>
  1. 事件修饰符便利性 原生 JavaScript 要实现类似 Vue 事件修饰符的功能，需要手动编写逻辑。例如，阻止事件冒泡需要在事件处理函数中调用 event.stopPropagation()。
const outerDiv = document.getElementById('outerDiv');
const innerDiv = document.getElementById('innerDiv');
outerDiv.addEventListener('click', function() {
  console.log('Outer div clicked');
});
innerDiv.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Inner div clicked');
});

而在 Vue 中，直接使用 .stop 修饰符即可轻松实现。

<div @click="handleOuterClick">
  Outer div
  <div @click.stop="handleInnerClick">Inner div</div>
</div>
  1. 组件化中的优势 在 Vue 组件化开发中，事件修饰符在父子组件通信和组件交互方面提供了很大的便利。原生 JavaScript 在处理组件化场景下的事件时，需要更复杂的设计模式来实现类似功能。

注意事项

  1. 修饰符顺序 事件修饰符的顺序很重要，不同的顺序可能会导致不同的结果。例如，.once.prevent 和 .prevent.once 在某些场景下效果是不同的。.once.prevent 会先确保事件只触发一次，然后阻止默认行为；而 .prevent.once 会先阻止默认行为，再确保事件只触发一次。
  2. 兼容性 虽然 Vue 的事件修饰符在现代浏览器中广泛支持，但在一些老旧浏览器中可能会出现兼容性问题。在开发中需要根据项目的目标浏览器进行测试和兼容处理。
  3. 性能影响 虽然事件修饰符带来了开发上的便利，但过多地使用复杂的事件修饰符组合可能会对性能产生一定影响。在性能敏感的场景下，需要谨慎评估事件修饰符的使用。

通过深入理解和灵活运用 Vue 中的事件修饰符，我们可以更加高效地开发前端应用，实现复杂的交互逻辑，同时保持代码的简洁和可读性。在实际项目中，根据不同的业务需求合理选择和组合事件修饰符，能够提升开发效率和用户体验。