Vue 中的事件对象

Vue.js 中的事件对象是一个特殊的对象，它包含与事件相关的各种属性和方法。当一个元素触发事件时，Vue 将创建一个事件对象并将其传递给事件处理程序。

事件对象属性

以下是一些常见的事件对象属性：

type：触发事件的类型，例如 “click” 或 “keyup”。

target：触发事件的元素。

currentTarget：当前正在处理事件的元素。

event：原始浏览器事件对象。

detail：自定义事件数据。

事件对象方法

事件对象还提供了以下方法：

preventDefault()：阻止默认浏览器行为。

stopPropagation()：阻止事件冒泡到祖先元素。

stopImmediatePropagation()：立即停止事件冒泡和传播。

使用事件对象

为了在 Vue 中使用事件对象，您可以在事件处理程序函数中访问它。例如：

<code><button>点击我</button>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.type); // "click"
      console.log(event.target); // HTMLButtonElement
      event.preventDefault();
    }
  }
}
</script></code>

在上面的示例中， 函数提供了一个事件对象作为其参数。您可以使用此对象访问事件的类型、目标元素等信息。

自定义事件数据

您可以通过 属性向自定义事件传递数据。例如：

<code><my-component><button>触发事件</button>
</my-component><script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', { message: '你好，世界！' });
    },
    handleEvent(event) {
      console.log(event.detail.message); // "你好，世界！"
    }
  }
}
</script></code>

这允许您将任意数据与事件一起传播和接收。