给组件绑定原生事件

<div id="app">
      <child @click="handleClick"></child>
</div>
<script>
      Vue.component('child',{
        template:'<p>hello</p>'
      })
      var vm=new Vue({
        el:'#app',
        methods:{
          handleClick(){
            alert('click')
          }
        }
      
      })
</script>

当我们这么写，点击child这个组件时并不会弹出。要点击child弹出内容应该下面这么写

<div id="app">
      <child @click="handleClick"></child>
</div>
<script>
      Vue.component('child',{
        template:'<p @click="handleChildClick">hello</p>',
        methods:{
          handleChildClick(){
            alert('child click')
          }
        }
      })
      var vm=new Vue({
        el:'#app',
        methods:{
          handleClick(){
            alert('click')
          }
        }      
      })
</script>

在子组件p元素上绑定的事件是原生事件，在父组件child上绑定的事件是自定义事件，自定义事件触发就要通过子组件的$emit

<div id="app">
      <child @click="handleClick"></child>
    </div>
    <script>
      Vue.component('child',{
        template:'<p @click="handleChildClick">hello</p>',
        methods:{
          handleChildClick(){
            alert('child click')
            this.$emit('click')  //触发父组件的自定义事件
          }
        }
      })
      var vm=new Vue({
        el:'#app',
        methods:{
          handleClick(){
            alert('click')
          }
        }      
      })
    </script>

但是这么通过两层的传递太麻烦了，我只想父组件上监听原生事件，有没有简单的方法，有

<div id="app">
      <child @click.native="handleClick"></child>
      通过修饰符.native 表示监听的不再是自定义事件，而是原生事件
    </div>
    <script>
      Vue.component('child',{
        template:'<p>hello</p>'
        }
      )
      var vm=new Vue({
        el:'#app',
        methods:{
          handleClick(){
            alert('click')
          }
        }      
      })
    </script>