vue29-vue2.0组件通信_recv
2017-06-11 23:17
106 查看
<!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中转
相关文章推荐
- Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
- Vue2.0学习之详解Vue 组件及父子组件通信
- 组件与组件之间的通信以及vue2.0中的变化、示例
- vue2.0组件之间的通信
- vue开发:vue2.0父子组件及非父子组件之间的通信方法
- Vue2.0 之父子兄弟组件间通信
- Vue2.0的变化(1)——vue2.0组件定义/生命周期/循环/自定义键盘/过滤器/组件通信的变化
- 组件与组件之间的通信以及vue2.0中的变化、示例
- vue2.0中的组件通信3——兄弟组件之间通信
- vue2.0实现父子通信(基于之前我写的复选框组件)
- Vue2.0组件之间通信
- vue2.0中的组件通信操作1——父组件向子组件下发数据
- vue2.0学习之组件间通信
- vue2.0+基础知识连载(15)--- 父子组件通信
- Vue2.0组件之间数据交互和通信
- vue2.0 组件通信
- vue中自定义组件及组件间通信
- 20180311.非父子组件之间通信,改进登录注册
- 饿了么项目---12、父子组件、兄弟组件之间数据通信与事件派发(关于购物车添加按钮的动画)
- vue2.0中的组件通信2——子组件向父组件传递数据