1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue1.0.js"></script>
  13.     <script>
  14.         window.onload=function(){
  15.             new Vue({
  16.                 el:'#box',
  17.                 data:{
  18.                     a:'我是父组件数据'
  19.                 },
  20.                 components:{
  21.                     'child-com':{//定义父组件
  22.                         props:['msg'],//父组件从父组件获取的数据
  23.                         template:'#child',//父组件页面
  24.                         methods:{//父组件方法
  25.                             change(){
  26.                                 this.msg='被更改了'//:msg.sync="a"，<strong>{{msg}}</strong> ，父级: ->{{a}} 在1.0都被更改了。
  27.                             }
  28.                         }
  29.                     }
  30.                 }
  31.             });
  32.         };
  33.     </script>
  34. </head>
  35. <body>
  36.     <template id="child">
  37.         <div>
  38.             <span>我是子组件</span>
  39.             <input type="button" value="按钮" @click="change">
  40.             <strong>{{msg}}</strong>
  41.         </div>
  42.     </template>
  43.  
  44.     <div id="box">
  45.         父级: ->{{a}}
  46.         <br>
  47.         <child-com :msg.sync="a"></child-com>
  48.     </div>
  49. </body>
  50. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         window.onload=function(){
  15.             new Vue({
  16.                 el:'#box',
  17.                 data:{
  18.                     a:'我是父组件数据'
  19.                 },
  20.                 components:{
  21.                     'child-com':{
  22.                         props:['msg'],
  23.                         template:'#child',
  24.                         methods:{
  25.                             change(){
  26.                                 this.msg='被更改了'////:msg.sync="a"，<strong>{{msg}}</strong> 在2.0都被更改了。，父级: ->{{a}} 在2.0没有被更改。
  27.                             }
  28.                         }
  29.                     }
  30.                 }
  31.             });
  32.         };
  33.     </script>
  34. </head>
  35. <body>
  36.     <template id="child">
  37.         <div>
  38.             <span>我是子组件</span>
  39.             <input type="button" value="按钮" @click="change">
  40.             <strong>{{msg}}</strong>
  41.         </div>
  42.     </template>
  43.  
  44.     <div id="box">
  45.         父级: ->{{a}}
  46.         <br>
  47.         <child-com :msg="a"></child-com>
  48.     </div>
  49. </body>
  50. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         window.onload=function(){
  15.             new Vue({
  16.                 el:'#box',
  17.                 data:{
  18.                     giveData:{//父组件传对象给子组件
  19.                         a:'我是父组件数据'
  20.                     }
  21.                 },
  22.                 components:{
  23.                     'child-com':{
  24.                         props:['msg'],
  25.                         template:'#child',
  26.                         methods:{
  27.                             change(){
  28.                                 //this.msg='被更改了'
  29.                                 this.msg.a='被改了';// 父级: ->{{giveData.a}}， <strong>{{msg.a}}</strong>都改了。
  30.                             }
  31.                         }
  32.                     }
  33.                 }
  34.             });
  35.         };
  36.     </script>
  37. </head>
  38. <body>
  39.     <template id="child">
  40.         <div>
  41.             <span>我是子组件</span>
  42.             <input type="button" value="按钮" @click="change">
  43.             <strong>{{msg.a}}</strong>
  44.         </div>
  45.     </template>
  46.  
  47.     <div id="box">
  48.         父级: ->{{giveData.a}}
  49.         <br>
  50.         <child-com :msg="giveData"></child-com>
  51.     </div>
  52. </body>
  53. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>智能社——http://www.zhinengshe.com</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script>
  14.         window.onload=function(){
  15.             new Vue({
  16.                 el:'#box',
  17.                 data:{
  18.                     a:'我是父组件数据'
  19.                 },
  20.                 components:{
  21.                     'child-com':{
  22.                         data(){
  23.                             return {//子组件数据
  24.                                 b:''
  25.                             }
  26.                         },
  27.                         props:['msg'],
  28.                         template:'#child',
  29.                         mounted(){//mounted是原来的ready
  30.                             this.b=this.msg;
  31.                         },
  32.                         methods:{
  33.                             change(){
  34.                                 this.b='被改了';//<strong>{{b.a}}</strong>改了，父级: ->{{a}}没改。
  35.                             }
  36.                         }
  37.                     }
  38.                 }
  39.             });
  40.         };
  41.     </script>
  42. </head>
  43. <body>
  44.     <template id="child">
  45.         <div>
  46.             <span>我是子组件</span>
  47.             <input type="button" value="按钮" @click="change">
  48.             <strong>{{b.a}}</strong>
  49.         </div>
  50.     </template>
  51.  
  52.     <div id="box">
  53.         父级: ->{{a}}
  54.         <br>
  55.         <child-com :msg.sync="a"></child-com>
  56.     </div>
  57. </body>
  58. </html>
  1. 组件通信:
  2.     vm.$emit()
  3.     vm.$on();
  4.  
  5.     父组件和子组件:
  6.  
  7.     子组件想要拿到父组件数据:
  8.         通过  props
  9.  
  10.     之前，子组件可以更改父组件信息，可以是同步  sync
  11.     现在，不允许直接给父级的数据，做赋值操作
  12.  
  13.     问题，就想更改：
  14.         a). 父组件每次传一个对象给子组件, 对象之间引用    √
  15.         b). 只是不报错, mounted中转

vue29-vue2.0组件通信_recv的更多相关文章

  1. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  2. vue2.0 组件通信

    组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...

  3. vue2.0组件通信小总结

    1.父组件->子组件 父组件 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替 ...

  4. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  5. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  6. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  7. Vue2.0组件之间通信（转载）

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  8. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  9. v2.0 组件通信的总结

    在vue.js现在比较流行,层出不穷的js框架越来越强调数据绑定,组件化开发. 正在给公司做一个管理后台,基本思路是编写几个通用组件,采用单页面应用的形式完成: 结构大致如下: mainVue lef ...

随机推荐

  1. 捕捉soap的xml形式

    下面是我以前对Php的soap接口进行抓包分析出的结果,这个分析在当服务端或者客户端的Php没有安装soap模块时,可以使用构建xml的方式实现相同的功能 服务端: $data = $HTTP_RAW ...

  2. HDU 1667 The Rotation Game (A*迭代搜索)

    题目大意:略 每次选择一个最大深度K,跑IDA* 估价函数H=8-中间8个格里出现次数最多的数的个数x,即把它填满这个数最少需要8-x次操作,如果dep+H>K,就跳出.. 深搜的时候暴力修改, ...

  3. /etc/rsyncd.conf

    [root@backup ~]# cat /etc/rsyncd.conf #Rsync server#created by oldboy ##rsyncd.conf start##uid = rsy ...

  4. java读取excel文件内容

    1.导入依赖JAR包 <!-- jxl 操作excel --> <dependency> <groupId>org.jxls</groupId> < ...

  5. nginx upstream

    nginx转发http和tcp http转发 upstream goforit_201 { server 172.168.10.10:201; } server { listen 201; serve ...

  6. 【CS round 34】Minimize Max Diff

    [题目链接]:https://csacademy.com/contest/round-34/task/minimize-max-diff/ [题意] 给你n个数字; 数组按顺序不下降; 让你删掉k个数 ...

  7. [MST] Use Volatile State and Lifecycle Methods to Manage Private State

    MST has a pretty unique feature: It allows you to capture private state on models, and manage this s ...

  8. ios 将随意对象存进数据库

    要将一个对象存进数据库的blob字段,最好先转为NSData.一个对象要遵守NSCoding协议,实现协议中对应的方法,才干转成NSData. NSData *statusData = [NSKeye ...

  9. 数据结构之fhq-treap

    本文内容部分转自某大佬博客:https://blog.csdn.net/CABI_ZGX/article/details/79963427 例题:https://www.luogu.org/probl ...

  10. 青蛙的约会 poj 1061

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 86640   Accepted: 15232 Descripti ...