vue怎么給自定義組件綁定原生事件

本文轉載自查看原文 2019-07-17 19:35 2714 vue

　　下面主要以4個示例Demo演示（示例代碼JS引用的Vue CDN），建議小伙伴直接復制示例代碼運行查看，

　　趕時間的小伙伴可直接往下拉，看示例demo4

　　注：全局或局部注冊的組件稱為子組件，其中聲明的組件名稱（如下demo中的child）是一個自定義組件

　　Demo1-直接給父組件綁定原生事件

 <!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root" @click="handleClick">
                Child
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

　　Demo2-如果像demo1直接給自定義組件child綁定原生事件，下面代碼會報錯，那么給child組件綁定原生事件應該怎么辦呢？（先看demo3，后看demo4）

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

　　Demo3-使用$emit()發布事件廣播，然后父組件可以監聽子組件向外觸發的事件，並執相應方法即可

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div @click="handleChild">Child</div>',
                     methods: {
                           handleChild: function() {
                                this.$emit('click');
                           }
                     }
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

　　注：但這種方式是給組件綁定自定義事件，而不是綁定原生事件且要觸發2個事件，比較麻煩，此時需要使用demo4的方法

　　Demo4-直接使用事件修飾符native即可

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child @click.native="handleClick"></child>
           </div>
           <script>
                Vue.component('child', {
                     template: '<div>Child</div>'
                })
                
                var vm = new Vue({
                     el: '#root',
                     methods: {
                           handleClick: function() {
                                alert(1);
                           }
                     }
                })
           </script>
     </body>
</html>

免責聲明！

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

猜您在找 vue自定義組件添加原生事件監聽 vue組件綁定原生事件 vue組件綁定原生事件 Vue基礎——將原生事件綁定到組件關於 Weex 自定義（原生事件）和（原生控件）流程 Vue組件綁定自定義事件 vue_子組件綁定原生事件 vuejs給組件綁定原生事件 vue的原生事件綁定流程 Vue-native綁定原生事件