vue 给组件绑定自定义事件无效之加上native绑定原生事件

1，给组件绑定自定义事件，点click没反应

<div id="root">
      <child @click="handleClick"></child>//组件上进行的事件的绑定是自定义事件，监听自定义事件
</div>
<script>
  vue.component('child',{
      template:'<div></div>'
  })
  var vm =new Vue({
      el:"#root",
      methods:{
              handleClick:function(){
                 alert('click')     //无反应        
             }      
      }  
  })
</script>

2，子组件触发父组件的自定义事件，click有反应

<div id="root">
      <child @click="handleClick"></child>//组件上进行的事件的绑定是自定义事件，监听自定义事件
</div>
<script>
  vue.component('child',{
      template:'<div @click="handleChildClick"></div>' ,//给元素进行事件的绑定才是真正的原生事件
      methods:{
             handleChildClick:function(){
                 alert('child click')        
                 this.$emit('handleClick')    //触发自定义事件的必要条件 
             }   
      }
  })
  var vm =new Vue({
      el:"#root",
      methods:{
              handleClick:function(){
                 alert('click')   //有反应                   
             }      
      }  
  })
</script>

3，给组件绑定原生事件只需要在后面加上native修饰符

<div id="root">
      <child @click.native="handleClick"></child>//组件上进行的事件的绑定是自定义事件，监听自定义事件
</div>
<script>
  var vm =new Vue({
      el:"#root",
      methods:{
              handleClick:function(){
                 alert('click')     //有反应        
             }      
      }  
  })
</script>