W3cubDocs

/Vue.js 3

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"
/>

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"
/>

MyComponent.vue

<script>
  export default {
    emits: ['close']
  }
</script>

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

See also

© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html