下面主要以4个示例Demo演示（示例代码JS引用的Vue CDN），建议小伙伴直接复制示例代码运行查看，

　　赶时间的小伙伴可直接往下拉，看示例demo4

　　注：全局或局部注册的组件称为子组件，其中声明的组件名称（如下demo中的child）是一个自定义组件

 

　　Demo1-直接给父组件绑定原生事件

 <!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root" @click="handleClick">
                Child
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

  

　　Demo2-如果像demo1直接给自定义组件child绑定原生事件，下面代码会报错，那么给child组件绑定原生事件应该怎么办呢？（先看demo3，后看demo4）

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

  　　

　　Demo3-使用$emit()发布事件广播，然后父组件可以监听子组件向外触发的事件，并执相应方法即可

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div @click="handleChild">Child</div>',
                     methods: {
                           handleChild: function() {
                                this.$emit('click');
                           }
                     }
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

　　注：但这种方式是给组件绑定自定义事件，而不是绑定原生事件且要触发2个事件，比较麻烦，此时需要使用demo4的方法

　　

　　Demo4-直接使用事件修饰符native即可

 

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click.native="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点