如果你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，我们可以添加.native修饰符 @click.native=''function''。上demo:

<div id="app">
    <div class="box">
      <Son @click='handlerFun'></Son>
    </div>
  </div>
  <script>
    const Son = Vue.component('Son', {
      template: '<button class="box1">son</button>',
      methods: {}
    })
    new Vue({
      el: "#app",
      components: {
        Son
      },
      methods: {
        handlerFun() {
          console.log('父级')
        }
      }
    })
  </script>

测试下发现这里的点击事件 handlerFun 没有触发，现在加上 .native,

<div id="app">
    <div class="box">
      <Son @click.native='handlerFun' @mouseover=parentMoverFun></Son>
    </div>
  </div>
  <script>
    const Son = Vue.component('Son', {
      template: '<button @mouseover=handlerSon @click=sonClick class="box1">son</button>',
      methods: {
        handlerSon() {
          console.log('mouseover--子级')
        },
        sonClick() {
          console.log('sonClick--子级')
        }
      }
    })
    new Vue({
      el: "#app",
      components: {
        Son
      },
      methods: {
        handlerFun() {
          console.log('父级')
        },
        parentMoverFun() {
          console.log('父级pmo')
        },
      }
    })
  </script>

额(⊙﹏⊙)，加的事件多了点，多测测没毛病，从demo发现
1、父级 click 加 .native 了确实触发了， mouseover 没加没触发
2、子级上也有 click，先触发了子级上的 click 函数，然后触发了父级的 click。
关于 .native 官网解释：

你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

如果子组件是咱们自己写的，想父组件用他时不加.native 也能用还有一种方法 v-on="$listeners"，

<div id="app">
    <div class="box">
      <Son @click='handlerFun' @mouseover=parentMoverFun></Son>
    </div>
  </div>
  <script>
    const Son = Vue.component('Son', {
      template: '<button @mouseover=handlerSon v-on="$listeners" @click=sonClick class="box1">son</button>',
      methods: {
        handlerSon() {
          console.log('mouseover--子级')
        },
        sonClick() {
          console.log('sonClick--子级')
        }
      }
    })
    new Vue({
      el: "#app",
      components: {
        Son
      },
      data() {
        return {
          a: 123
        }
      },
      methods: {
        handlerFun() {
          console.log('父级')
        },
        parentMoverFun() {
          console.log('父级pmo')
        },
      }
    })
  </script>

可以发现都触发了。
vm.$listeners 的官方解释：

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

其实修饰符还有很多
如：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
参考：
https://vuejs.bootcss.com/api/#v-on