vue中父子组件绑定事件

父子组件绑定事件：

注意：父组件是自定义事件，由子组件传递触发事件信息；子组件是系统事件比如：click等

    <div id="app">
       <counter @handle="fatherEvent"></counter>  
    </div>
    <script>
        var counter = {
            template: `<div @click="sonEvent">hello</div>`,
            methods: {
                sonEvent(){
                    console.log("sonEvent")
                    this.$emit('handle')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter 
            },
            methods: {
                fatherEvent(){
                    console.log("fatherEvent")
                }
            }
        })
    </script>

2. 监听父组件的系统事件（.native修饰符）

    <div id="app">
       <counter @click.native="fatherEvent"></counter>  
    </div>
    <script>
        var counter = {
            template: `<div>hello</div>`,
        }
        var vm = new Vue({
            el: '#app',
            components: {
                counter 
            },
            methods: {
                fatherEvent(){
                    console.log("fatherEvent")
                }
            }
        })
    </script>

当点击时，会触发父组件上的click事件，打印