Vue 给组件绑定原生事件 - 木子才的博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <child @click="handleClick"></child>
        </div>
        
        <script>
            Vue.component('child', {
                template: '<div @click="handleChildClick">Child</div>',
                methods: {
                    handleChildClick: function() {
                        // alert("bbbbb")
                        this.$emit('click')
                    },
                },
            })
            
            var vm = new Vue({
                el: '#app',
                methods: {
                    handleClick: function() {
                        alert('aaaa')
                    },
                },
            })
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <child @click.native="handleClick"></child>
        </div>
        
        <script>
            Vue.component('child', {
                template: '<div>Child</div>',
            })
            
            var vm = new Vue({
                el: '#app',
                methods: {
                    handleClick: function() {
                        alert('aaaa')
                    },
                },
            })
        </script>
    </body>
</html>