Vue2-给组件绑定原生事件

在组件上设置点击事件

<div id="app"  >
       <child @click="handleClick"></child>
   </div>

   <script>
     
       Vue.component('child',{
           template:`<div>Child</div>`
       }),
       new Vue({
           el:'#app',
           methods:{
               handleClick(){
                   alert('click')
               }
           }
       })

   </script>

显然在Root组件中不能被触发，因为这时候 组件child上的click相当于自定义的一个事件，这时候需要通过this.$emit去触发自定义事件

<div id="app"  >
    <child  @click="handleClick"></child>
</div>

<script>
  
    Vue.component('child',{
        template:`<div  @click="handleClick">Child</div>`,
        methods:{
            handleClick(){
                this.$emit('click')
            }
        }
    }),
    new Vue({
        el:'#app',
        methods:{
            handleClick(){
                alert('click')
            }
        }
    })

</script>

这时候就实现了点击事件，但是究其根本，这还是自定义事件，太过麻烦。

给组件绑定原生事件

非常简单：只要在事件绑定后面加上.native 的修饰符就可以了

<div id="app"  >
       <child  @click.native="handleClick"></child>
</div>

<script>
       Vue.component('child',{
           template:`<div >Child</div>`,
       }),
       new Vue({
           el:'#app',
           methods:{
               handleClick(){
                   alert('click')
               }
           }
       })
</script>