<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="t"> <rrr ref="one" @change="Jtotal"></rrr> <rrr ref="two" @change="Jtotal"></rrr> <div>{{total}}</div> </div> <script> Vue.component("rrr",{ template:"<div @click='hand'>{{number}}</div>", data:function(){ return{ number:0 } }, methods:{ hand:function(){ this.number++ this.$emit("change") } } }) var vm=new Vue({ el:"#t", data:{ total:0 }, methods:{ Jtotal:function(){ this.total=this.$refs.one.number+this.$refs.two.number } } }) </script> </body> </html>