标签：之间 str 1.0 code syn 报错 web sync component
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue1.0.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ a:‘我是父组件数据‘ }, components:{ ‘child-com‘:{//定义父组件 props:[‘msg‘],//父组件从父组件获取的数据 template:‘#child‘,//父组件页面 methods:{//父组件方法 change(){ this.msg=‘被更改了‘//:msg.sync="a"，<strong>{{msg}}</strong> ，父级: ->{{a}} 在1.0都被更改了。 } } } } }); }; </script> </head> <body> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{{msg}}</strong> </div> </template> <div id="box"> 父级: ->{{a}} <br> <child-com :msg.sync="a"></child-com> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ a:‘我是父组件数据‘ }, components:{ ‘child-com‘:{ props:[‘msg‘], template:‘#child‘, methods:{ change(){ this.msg=‘被更改了‘////:msg.sync="a"，<strong>{{msg}}</strong> 在2.0都被更改了。，父级: ->{{a}} 在2.0没有被更改。 } } } } }); }; </script> </head> <body> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{{msg}}</strong> </div> </template> <div id="box"> 父级: ->{{a}} <br> <child-com :msg="a"></child-com> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ giveData:{//父组件传对象给子组件 a:‘我是父组件数据‘ } }, components:{ ‘child-com‘:{ props:[‘msg‘], template:‘#child‘, methods:{ change(){ //this.msg=‘被更改了‘ this.msg.a=‘被改了‘;// 父级: ->{{giveData.a}}， <strong>{{msg.a}}</strong>都改了。 } } } } }); }; </script> </head> <body> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{{msg.a}}</strong> </div> </template> <div id="box"> 父级: ->{{giveData.a}} <br> <child-com :msg="giveData"></child-com> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ a:‘我是父组件数据‘ }, components:{ ‘child-com‘:{ data(){ return {//子组件数据 b:‘‘ } }, props:[‘msg‘], template:‘#child‘, mounted(){//mounted是原来的ready this.b=this.msg; }, methods:{ change(){ this.b=‘被改了‘;//<strong>{{b.a}}</strong>改了，父级: ->{{a}}没改。 } } } } }); }; </script> </head> <body> <template id="child"> <div> <span>我是子组件</span> <input type="button" value="按钮" @click="change"> <strong>{{b.a}}</strong> </div> </template> <div id="box"> 父级: ->{{a}} <br> <child-com :msg.sync="a"></child-com> </div> </body> </html>
组件通信:
vm.$emit()
vm.$on();
父组件和子组件:
子组件想要拿到父组件数据:
通过 props
之前，子组件可以更改父组件信息，可以是同步 sync
现在，不允许直接给父级的数据，做赋值操作
问题，就想更改：
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
标签：之间 str 1.0 code syn 报错 web sync component
原文地址：http://www.cnblogs.com/yaowen/p/6986858.html
