vue自定义组件添加原生事件监听

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

Demo1-直接给父组件添加事件监听

 1  <!DOCTYPE html>
 2 <html>
 3      <head>
 4            <meta charset="UTF-8">
 5            <title></title>
 6            <script src="../../vue.js"></script>
 7      </head>
 8      <body>
 9            <div id="root" @click="handleClick">
10                 Child
11            </div>
12            <script>
13                 Vue.component('child', {
14                      template: '<div>Child</div>'
15                 })
16                 
17                 var vm = new Vue({
18                      el: '#root',
19                      methods: {
20                            handleClick: function() {
21                                 alert(1);
22                            }
23                      }
24                 })
25            </script>
26      </body>
27 </html>

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

 1 <!DOCTYPE html>
 2 <html>
 3      <head>
 4            <meta charset="UTF-8">
 5            <title></title>
 6            <script src="../../vue.js"></script>
 7      </head>
 8      <body>
 9            <div id="root">
10                 <child @click="handleClick"></child>
11            </div>
12            <script>
13                 Vue.component('child', {
14                      template: '<div @click="handleChild">Child</div>',
15                      methods: {
16                            handleChild: function() {
17                                 this.$emit('click');
18                            }
19                      }
20                 })
21                 
22                 var vm = new Vue({
23                      el: '#root',
24                      methods: {
25                            handleClick: function() {
26                                 alert(1);
27                            }
28                      }
29                 })
30            </script>
31      </body>
32 </html>

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

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

 1 <!DOCTYPE html>
 2 <html>
 3      <head>
 4            <meta charset="UTF-8">
 5            <title></title>
 6            <script src="../../vue.js"></script>
 7      </head>
 8      <body>
 9            <div id="root">
10                 <child @click.native="handleClick"></child>
11            </div>
12            <script>
13                 Vue.component('child', {
14                      template: '<div>Child</div>'
15                 })
16                 
17                 var vm = new Vue({
18                      el: '#root',
19                      methods: {
20                            handleClick: function() {
21                                 alert(1);
22                            }
23                      }
24                 })
25            </script>
26      </body>
27 </html>

摘自：https://www.cnblogs.com/tu-0718/p/11196009.html

vue自定义组件添加原生事件监听

猜你喜欢