父传子 : 子组件接收变量名=父组件传递的数据
如：:f-cmsg="fmsg" 注意驼峰问题
子传父：@子组件关联的方法名 = 父组件接受的方法名
如：@func="getmsg"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父子组件相互传递数据</title> <link rel="icon" sizes="any" href="../img/2.png" > <!--<link rel="icon" sizes="any" href="../img/2.png">--> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> h4{ color: red; } </style> </head> <body> <div id="box"> <p>父组件</p>{{fmsg}}<br/> 子组件传过来的元素:<h4>{{zCmsg}}</h4> <!--父传子 :接受变量名 注意驼峰问题 :接收变量名=传递的数据 如：:f-cmsg="fmsg"--> <!--子传父：@关联方法名 = 接受方法名 如：@func="getmsg"--> <re :f-cmsg="fmsg" @func="getmsg"></re> </div> <template id="t1"> <div> <!--通过点击事件触发发送父标签的信息--> <button @click="setmsg">发送给父组件的数据</button> <p>子组件</p>{{zmsg}}<br/> 父组件传过来的元素:<h4>{{fCmsg}}</h4> </div> </template> <script type="text/javascript"> var vm=new Vue({ el:"#box", data:{ fmsg:"我是父标签的数据", zCmsg:"" }, methods:{ //接受子数据的方法 括号中为传递过来的参数 ,个数由传递参数来决定 getmsg:function(m){ this.zCmsg=m; }, }, //局部组件 components:{ re:{ template:"#t1", //接受父标签传递过来的数据 【】中为传递过来的数据可直接使用 props:['fCmsg'], data:function(){ return { zmsg:"我是子标签的数据", } }, methods:{ //点击事件 setmsg:function(){ //this.$emit(关联方法，传递数据1...) this.$emit("func",this.zmsg); }, } } } }); </script> </body> </html>