<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"> <!-- 父组件 --> <!-- 父组件通过属性向子组件传值，父组件可以向子组件传递任何数据， 子组件不能修改父组件传递过来的数据，若非要修改可以拷贝副本 --> <counter :count="1"></counter> <counter :count="2"></counter> </div> <script> // 子组件 //子组件通过事件向父组件传值 var counter={ props:[‘count‘], data:function(){ return{ number:this.count } }, template:‘<div @click="handleClick">{{number}}</div>‘, methods:{ handleClick:function(){ this.number++ } }, } var vm=new Vue({ el:"#t", components:{ counter:counter } }) </script> </body> </html>
原文：https://www.cnblogs.com/tilyougogannbare666/p/14377252.html