.native和.stop

`.native` 和 `.stop` 都是 Vue 事件修饰符，但它们的作用是不同的。

`.native` 修饰符用于监听组件根元素的原生事件。通常情况下，使用 `@` 符号来绑定组件的事件，Vue 会自动将事件绑定到组件的根元素上。但是，在某些情况下，可能需要监听组件根元素的原生事件，例如在自定义组件中，需要在根元素上手动绑定原生事件。

而 `.stop` 修饰符用于阻止事件冒泡。当一个元素上触发了某个事件，事件会从该元素开始冒泡直到根元素。如果希望阻止事件继续冒泡，可以在事件处理函数中调用 `event.stopPropagation()` 方法。

举个例子，假设我们有一个自定义的按钮组件 `<my-button>`，它的模板中包含一个原生的 `<button>` 元素。如果我们想要在父组件中监听 `<my-button>` 组件的 `click` 事件，并阻止事件冒泡到父组件，可以这样写：

<template>
  <div @click="handleDivClick">
    <my-button @click.stop="handleButtonClick"></my-button>
  </div>
</template>

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

export default {
  components: {
    MyButton
  },
  methods: {
    handleDivClick() {
      console.log('Div clicked');
    },
    handleButtonClick(event) {
      event.stopPropagation();
      console.log('Button clicked');
    }
  }
}
</script>

在上面的代码中，当点击 `<my-button>` 组件时，只会触发 `handleButtonClick` 方法，不会触发 `handleDivClick` 方法。同时，使用了 `.stop` 修饰符阻止了事件继续冒泡到父组件。