vue組件綁定原生事件

時間 2019-11-16

標籤 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。