# v-on.native
modifier removed
breaking
# Overview
The .native
modifier for v-on
has been removed.
# 2.x Syntax
Event listeners passed to a component with v-on
are by default only triggered by emitting an event with this.$emit
. To add a native DOM listener to the child component's root element instead, the .native
modifier can be used:
<my-component
v-on:close="handleComponentEvent"
v-on:click.native="handleNativeClickEvent"
/>
1
2
3
4
2
3
4
# 3.x Syntax
The .native
modifier for v-on
has been removed. At the same time, the new emits
option allows the child to define which events it does indeed emit.
Consequently, Vue will now add all event listeners that are not defined as component-emitted events in the child as native event listeners to the child's root element (unless inheritAttrs: false
has been set in the child's options).
<my-component
v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"
/>
1
2
3
4
2
3
4
MyComponent.vue
<script>
export default {
emits: ['close']
}
</script>
1
2
3
4
5
2
3
4
5
# Migration Strategy
- remove all instances of the
.native
modifier. - ensure that all your components document their events with the
emits
option.
Migration build flag: COMPILER_V_ON_NATIVE