.native和.stop一起使用

`.native` 和 `.stop` 修饰符可以一起使用，用于监听组件根元素的原生事件并阻止事件冒泡。

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

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

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

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

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