vue2 基础学习08（给组件绑定原生事件）

在组件上设置点击事件

 <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>