.native

.native

.native 是 Vue.js 提供的一个修饰符，用于监听元素的原生事件，而不是 Vue.js 经过处理后的事件。

好的，让我们考虑一个包含了一个原生HTML按钮的组件，这个按钮又包含了一个Vue.js子组件。我们将在父组件中监听子组件内部的原生点击事件，并比较使用和不使用 .native 修饰符时的行为。

假设我们有以下的Vue组件结构：

<!-- ParentComponent.vue -->
<template>
  <div>
    <custom-button @click.native="handleButtonClick">点击我</custom-button>
  </div>
</template>

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

export default {
  components: {
    CustomButton,
  },
  methods: {
    handleButtonClick() {
      console.log('父组件中的按钮被点击了！');
    },
  },
};
</script>

<!-- CustomButton.vue -->
<template>
  <button>子组件按钮</button>
</template>

在这个例子中，ParentComponent 组件包含了一个自定义的 CustomButton 子组件，并在父组件中监听了子组件内部按钮的点击事件。

如果在父组件中使用 .native 修饰符，则会监听子组件内部按钮的原生点击事件。而如果不使用 .native 修饰符，则会监听子组件自身的Vue点击事件。所以，在这个例子中，使用和不使用 .native 修饰符会导致监听的事件不同，这是两者之间的区别。

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击事件被触发了！');
    }
  }
}
</script>

在 Vue.js 组件中，通过 @click 绑定事件时，Vue.js 会自动将这个事件绑定到组件的根元素上，因此不需要使用 .native 修饰符来监听原生事件。然而，使用 .native 修饰符也是可以的，但是在组件内部这没有区别，因为事件绑定的目标是相同的。

<template>
  <button @click.native="handleNativeClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleNativeClick() {
      console.log('原生点击事件被触发了！');
    }
  }
}
</script>