首页 > 其他 > 详细

vue组件绑定原生事件

时间:2018-05-13 18:53:01      阅读:179      评论:0      收藏:0      [点我收藏+]
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <child @click="handleClick"></child><!--这个click为自定义事件-->
10         </div>        
11         
12         <!-- 开发环境版本,包含了用帮助的命令行警activeOne告 -->
13         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14         <script>
15             Vue.component(child, {                
16                 template: <div @click="handleChildClick">child</div>,
17                 methods: {
18                     handleChildClick: function() {
19                         alert(child click);
20                         this.$emit(click);//绑定一个自定义click事件
21                     }
22                 }
23             })
24             var app = new Vue({
25                 el: #app,
26                 methods: {
27                     //父组件接收到绑定的handleClick事件
28                     handleClick: function() {
29                         alert(click);
30                     }
31                 }
32             })
33             //整体先弹出child click,再弹出click
34         </script>
35     </body>
36 </html>

 

添加.native表示绑定原生事件
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <child @click.native="handleClick"></child><!--添加.native表示绑定原生事件-->
10         </div>        
11         
12         <!-- 开发环境版本,包含了用帮助的命令行警activeOne告 -->
13         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14         <script>
15             Vue.component(child, {                
16                 template: <div>child</div>,                
17             })
18             var app = new Vue({
19                 el: #app,
20                 methods: {
21                     handleClick: function(){
22                         alert(click)
23                     }
24                 }
25             })
26         //弹出click
27         </script>
28     </body>
29 </html>

 

vue组件绑定原生事件

原文:https://www.cnblogs.com/1032473245jing/p/9032851.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!