<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script> </head> <body> <div id="app"> <p>{{total}}</p> <click-add v-on:handleclick="addTotal"></click-add> <click-add v-on:handleclick="addTotal"></click-add> </div> <script> Vue.component('click-add',{ template:'<button v-on:click="handle">{{count}}</button>', data:function(){ return { count:0 } }, methods:{ handle:function(){ this.count +=1; this.$emit('handleclick'); } } }) var app = new Vue({ el:"#app", data:{ total:0 }, methods:{ addTotal:function(){ this.total +=1; } } }) // 1.父子组件传参 使用 v-on监听事件 ,使用$emit触发事件; // 2. 在子组件中使用驼峰命名函数名时,事件注册不上。 </script> </body> </html>
vue父子组件传参学习
最新推荐文章于 2024-08-18 13:53:12 发布