带有 e 的 Vue 事件两个参数 - JavaScript

在 Vue 中，事件处理程序通常只接收一个参数：事件对象。然而，在某些情况下，我们可能还需要访问原生事件对象，例如当我们需要获得触摸点的坐标或滚动位置等信息时。为了解决这个问题，Vue 提供了带有事件对象作为第二个参数的特殊语法。

语法

在模板中，我们可以使用以下语法来指定带有“e”参数的事件处理程序：

<button v-on:click="myHandler($event)">Click me</button>

在组件中，我们也可以使用以下语法：

export default {
  methods: {
    myHandler(event) {
      // ...
    },
  },
};

注意事项

• $event 是一个特殊变量，它会被编译为对应的事件对象。

• 在上述两个例子中，我们可以在事件处理程序中使用 event 参数来访问事件对象，例如 event.target，event.clientX 等等。

• 如果需要同时访问组件实例中的数据，可以使用函数语法来传递其他参数：

  <button v-on:click="myHandler('hello', $event)">Click me</button>
  

  export default {
    methods: {
      myHandler(msg, event) {
        console.log(msg, event.target);
      },
    },
  };
  

• 注意，传递其他参数必须位于 $event 参数的后面。如果反过来写，那么 $event 参数就不能省略，例如：

  <button v-on:click="myHandler($event, 'hello')">Click me</button>
  

  export default {
    methods: {
      myHandler(event, msg) {
        console.log(msg, event.target);
      },
    },
  };
  

示例

下面是一个带有“e”参数的事件处理程序的简单示例：

<template>
  <div>
    <button v-on:click="log($event)">Click me</button>
    <p>Click count: {{ count }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return { count: 0 };
    },
    methods: {
      log(event) {
        this.count++;
        console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
      },
    },
  };
</script>

在上述示例中，我们创建了一个简单的计数器，每次单击按钮时会将计数器加一并记录鼠标坐标。可以在浏览器的开发者工具中查看点击事件的详细信息。

总结

带有“e”参数的 Vue 事件处理程序可以让我们轻松地访问原生事件对象，从而实现更精细的交互操作和数据收集。但是，在使用时需要注意一些细节，例如参数顺序和函数语法的使用。