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删除。

猜您在找 父组件监听子组件的事件 vue中父组件如何监听子组件值的变化【Angular】父组件监听子组件事件(传参) vue2.x 父组件监听子组件事件并传回信息 vue自定义组件添加原生事件监听 Vue 组件（三）父组件与子组件传递数据之自定义事件 Vue事件在组件中的简单使用以及子组件事件触发父组件自定义事件 Vue子组件触发父组件中的方法( 给子组件绑定自定义事件 ) Vue3自定义事件中，子组件有返回参数，父组件也有参数的处理方法子组件通过 $emit 触发父组件的自定义事件