vue的自定義事件,父組件監聽子組件的事件變化做相應處理

本文轉載自查看原文 2019-09-22 11:58 2727 vue的自定義事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue的自定義事件</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <my-btn @total="allcounter"></my-btn>
10     <my-btn @total="allcounter"></my-btn>
11     <my-btn @total="allcounter"></my-btn>
12 
13     <p>所以按鈕一共點擊了{{totalCounter}}多少次</p>
14 </div>
15 
16 <template id="my_btn">
17     <button @click="total()">點擊了{{counter}}次</button>
18 </template>
19 
20 </body>
21 <script src="./vue.js"></script>
22 <script>
23     Vue.component('my-btn',{
24         template:'#my_btn',
25         data(){
26             return {
27                 counter:0
28             }
29         },
30         methods:{
31             total(){
32                 this.counter++
33                 //  通知外界我調用了這個方法
34                 this.$emit('total')
35 
36             }
37         }
38     })
39     new Vue({
40         el:'#app',
41         data:{
42             totalCounter:0,
43         },
44         methods: {
45             allcounter(){
46                 this.totalCounter += 1
47 
48             }
49         }
50     })
51 </script>
52 </html>

效果圖

免責聲明！

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

猜您在找 父組件監聽子組件的事件 vue2.x 父組件監聽子組件事件並傳回信息【Angular】父組件監聽子組件事件(傳參) vue自定義組件添加原生事件監聽 vue 父組件監聽子組件生命周期 Vue 父組件如何監聽子組件的生命周期 Vue 組件（三）父組件與子組件傳遞數據之自定義事件 Vue組件綁定自定義事件 vue中如何在子組件添加類似於watch屬性監聽父組件數據，數據變化時子組件做出相應的動作 Vue實現子組件監聽父組件傳遞的數據變化