vue自定義組件添加原生事件監聽

本文轉載自查看原文 2019-10-11 16:00 1720 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue怎么給自定義組件綁定原生事件 Vue中如何監聽組件的原生事件關於 Weex 自定義（原生事件）和（原生控件）流程 vue組件綁定原生事件 vue組件綁定原生事件 Vue基礎——將原生事件綁定到組件 vue的自定義事件,父組件監聽子組件的事件變化做相應處理 vue_子組件綁定原生事件 Vue組件綁定自定義事件 Vue（七）：組件的自定義事件和插槽