# v-on.native 修飾子の削除
breaking

# 概要

v-on.native 修飾子は削除されました。

# 2.x での構文

v-on でコンポーネントに渡されたイベントリスナは、デフォルトでは this.$emit でイベントを発行することでのみ発火されます。代わりにネイティブ DOM リスナを子コンポーネントのルート要素に追加するには、 .native 修飾子を使用できます:

<my-component
  v-on:close="handleComponentEvent"
  v-on:click.native="handleNativeClickEvent"
/>
1
2
3
4

# 3.x での構文

v-on.native 修飾子は削除されました。同時に、 新しい emits オプション によって、子要素が実際に発行するイベントを定義できるようになりました。

その結果、 Vue は子コンポーネントの発行するイベントとして定義されて いない すべてのイベントリスナを、子のルート要素のネイティブイベントリスナとして追加するようになりました(ただし inheritAttrs: false が子のオプションで設定されていない場合)。

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>
1
2
3
4

MyComponent.vue

<script>
  export default {
    emits: ['close']
  }
</script>
1
2
3
4
5

# 移行の戦略

  • .native 修飾子のすべてのインスタンスを削除します。
  • すべてのコンポーネントが、 emits オプションでイベントを記録するようにします。

移行ビルドのフラグ: COMPILER_V_ON_NATIVE

# 参照