给组件添加原生事件

1.父子组件事件绑定

一般情况下

【1】要点击子组件，则需要在子组件的元素上绑定事件，不能直接在子组件的引用上直接绑定

【2】子组件引用上绑定的事件其实是子组件自定义的事件，且需要由子组件向外发射$emit后，才可写在子组件的引用上，由父组件来接收

<div id="app">
        <!-- 父组件接收子组件的自定义事件click -->
        <child @click="handleClick"></child>   
</div>

 

 <script>
    //注册全局子组件
    Vue.component('child',{
        //这才是给子组件绑定事件
        template:'<div @click="handleChildClick">Child</div>',
        methods:{
            handleChildClick:function(){
                alert('child Clicked');
                this.$emit('click')
            }
        }   
    })
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick:function(){
                alert('clicked');
            }
        }
    })

2.给子组件绑定原生事件

由于上一种方式太过麻烦，则使用事件的native属性来绑定

<div id="app">
        <!-- 父组件接收子组件的自定义事件click -->
        <child @click.native="handleClick"></child>   
</div>

<script>
        
    Vue.component('child',{
        template:'<div>Child</div>',
    })
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick:function(){
                alert('clicked');
            }
        }
    })

</script>