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>

给组件绑定原生事件

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