vue组件绑定原生事件

Posted 铜镜123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件绑定原生事件相关的知识,希望对你有一定的参考价值。

 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组件绑定原生事件的主要内容,如果未能解决你的问题,请参考以下文章

[Vue]组件——将控件的原生事件绑定到组件

vue组件绑定原生事件

Vue组件绑定自定义事件

vue-learning:28 - component - 组件事件的修饰符`.native / .sync`,以及组件属性`model`

vue怎么触发元素的原生事件

给组件绑定原生事件