如何在vue.js組件上收聽本機DOM事件？

在Vue 3中，原生DOM事件默認直接綁定到組件根元素，無需.native修飾符；若組件為單根元素，可直接使用@event監聽，如@click；對於多根節點或需顯式控制時，應通過$emit或defineEmits定義並觸發自定義事件，以保持跨版本兼容性與清晰的事件接口。

To listen to native DOM events on a Vue.js component, you need to understand that by default, Vue only propagates events emitted with $emit when using v-on (the @ syntax). Native DOM events like click , input , or keydown don't automatically bubble up from the root element of a child component unless you explicitly forward them.

Use the @ syntax with .native modifier (Vue 2 only)

In Vue 2, you can listen to native events on a component's root element using the .native modifier:

This works because Vue 2 supports the .native modifier to attach listeners to the component's root element.

In Vue 3: .native modifier is removed

In Vue 3, the .native modifier was removed. All v-on listeners are now attached to the component's root element by default, unless the component has multiple root nodes (fragments).

If your component has a single root element, native events like click can be listened to directly:

This will attach the click listener to the root element of my-component .

Explicitly emit events from the child component

A cleaner and more predictable approach is to have the child component emit custom events in response to native events:

This keeps the interface explicit and works consistently across Vue 2 and 3.

Using defineEmits and defineProps (Vue 3 with

In Vue 3's , declare emitted events:

Then bind it in the template as before.

Basically, in Vue 3, native events are listened on the root element by default. No extra syntax is needed. For more control or multi-root components, emit custom events explicitly from the child.

以上是如何在vue.js組件上收聽本機DOM事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！