
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-dmeo</title> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="page"> <hellow></hellow> {{arr|json}} </div> <script type="text/javascript" src="//cdn.bootcss.com/vue/1.0.26/vue.js"></script> <script> var handle= function(){ var hellow = { template:"<div style='color:#f00;text-align:center;'><input type='text' v-model='mess' /><button @click='csend()'>点击</button>{{mess}}</div>", data:function(){ return { mess:'' } }, methods:{ csend:function(){ if(this.mess.trim()){ this.$dispatch('handleIt',this.mess) this.mess=''; } } } } return new Vue({ el:"#page", data:{ arr:[], }, methods:{ }, events:{ "handleIt":function(msg){ this.arr.push(msg); } }, components:{ hellow:hellow, } }) }() </script> </body> </html>