vue中，.native属性详解

在 Vue 中，`.native` 属性用于在组件上监听原生事件。Vue 组件封装了一些自定义事件（如 `click`、`input` 等），这些事件是组件自身所触发的，而非原生 DOM 事件。如果我们需要监听原生 DOM 事件，可以使用 `.native` 修饰符来告诉 Vue 监听原生事件。

例如，假设我们有一个自定义组件 `MyButton`：

<template>
  <button @click="onClick">Click me</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
};
</script>

这个组件封装了一个 `click` 事件，并通过 `$emit` 方法触发了该事件。如果我们在使用该组件时需要监听原生的 `click` 事件，就可以使用 `.native` 修饰符来实现：

<template>
  <div>
    <my-button @click.native="onNativeClick"></my-button>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  },
  methods: {
    onNativeClick() {
      console.log('Native click event');
    }
  }
};
</script>

在上面的代码中，我们在 `my-button` 组件上使用了 `.native` 修饰符来监听原生的 `click` 事件，并在组件外部定义了一个 `onNativeClick` 方法来处理该事件。这样，当用户点击 `my-button` 组件时，就会触发原生的 `click` 事件，并调用 `onNativeClick` 方法。

需要注意的是，`.native` 修饰符只能用于组件自定义事件的监听，不能用于原生 DOM 事件的监听。如果需要监听原生 DOM 事件，应该直接在模板中使用原生的事件监听器，例如 `@click`、`@input` 等。