炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue.js 3.0] Migration – v-on.native modifier removed

# 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.

# See also

  • Relevant RFC(opens new window)
  • Migration guide – New Emits Option
  • Migration guide – $listeners removed
  • Migration guide – Changes in the Render Functions API

炫意HTML5 » [Vue.js 3.0] Migration – v-on.native modifier removed

CSS3教程HTML5教程