关于 v-on 的 .native 修饰符

简介

v-on 指令用于监听 DOM 事件，.native 修饰符用于在组件上监听原生 DOM 事件。但需要注意的是，.native 修饰符仅在组件上才有效，在原生 HTML 元素上无效。

示例

以下代码演示了如何在组件上使用 .native 修饰符监听原生 DOM 事件：

<template>
  <div @click.native="handleClick">点击我</div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        console.log("点击了组件元素");
      },
    },
  };
</script>

在上述示例中，@click.native 用于监听原生 DOM 的 click 事件，当组件的 div 元素被点击时，会触发 handleClick 方法并在控制台输出日志。

注意事项

需要注意的是，.native 修饰符不支持动态绑定，只能在静态模板中使用。同时，在 Vue 2.1.0 版本及之后，可以在组件上使用 v-on="$listeners" 代替 .native 修饰符，实现相同的功能。

另外，由于 .native 修饰符只能在组件上使用，因此如果需要在原生 HTML 元素上监听 DOM 事件，应该直接使用相应的原生事件绑定语法，而非使用 .native 修饰符。

总结

.native 修饰符是用于在组件上监听原生 DOM 事件的语法糖，可以方便地让组件的父组件监听子组件的原生事件。但需要注意的是，.native 修饰符仅在组件上有效，在原生 HTML 元素上无效。