vue小故事之父子(上下级)通信之父传子props

vue小故事之父子(上下级)通信之父传子props

vue 父子(上下级)通信 props 

或许你对父子通信有点迷糊，为什么这样那样父子之间就可以通信了，以下通过一个小故事来进行解说，故事模型或许有点牵强，如果能理解最好，不能理解请向我咨询。

知识回顾，请参考父子通信的前置知识，父子组件
https://www.cnblogs.com/singledogpro/p/12057238.html
对vue不太熟悉的，请参阅vue入门初体验
https://www.cnblogs.com/singledogpro/p/11938222.html

一开始嘛，自己一个人随便炒几个家常菜，就算是搞点小生意，随便贴几个文字，加几幅图片。OJBK了。

 

，随便贴几个文字，加几幅图片

 

然后来几个客人，非得吃色香味俱全的菜肴(视频，高清图片)，而且要很多，你一个人当然准备不过来了。

 

色香味俱全的菜肴(视频，高清图片)

 

你心头一计，找几个老伙计，合伙弄一家餐饮公司得了，各个按照自己能力分配工作，有的砍价能力强负责进货，有的社交能力强负责大堂，有的料理能力强负责后台。根据src工商规范，创建了一家名为app的公司，并规定了它的创始人董事长，董事会成员以及披露了些公司经营信息，比如经营范围，资金规模等。

 

公司

 

之前是你自己一个人搞所有东西(所有资源加载和处理都在一个h5页面),合伙开公司了，职权和资源要模块化和组件化了，即分工明细。

 

一个人搞所有东西

 

在对公司进行管理之前，希望你对各人员职权再深入理解一番。

我们知道董事长(id为app的vue实例)管理着董事(mycpn)

 

董事长职权

 

董事(id为cpn的mycpn)又管着一大群人(div,h2,p)

 

董事职权

 

董事长与董事(上下级)的通信

董事长说要将公司的信息(比如2个信息，经营范围【business_scope】，资金规模【total_fund】(定义在data属性的2个字段)告诉下新来的员工（传递给子组件），那常务董事就说，那必须啊，那找2个人负责这事(定义在子组件的props属性内2个字段)，发邮箱或者贴大字报【在董事职权内进行渲染】。

 

父传子2个数据，一个是经营范围，一个是资金规模

 

由于这件事在董事长职权内对董事进行2项业务管理和操作，则相应地董事应该有2个人员来对接（定义在子组件的prop属性内2个字段），这里我们通过v-bind指令来实现，则有

 

董事指定2个人来对接2董事长的两项业务

 

最后【在董事职权内进行渲染】。

 

渲染

 

浏览器显示内容

 

浏览器显示内容

 

总的来说，父子通信的本质，就是在父组件内的子标签进行数据的双向绑定,然后在子组件内进行渲染。

 

父子通信的本质

 

需要注意的是，vue@2.x版本目前并不支持驼峰标识(每个单词的首字母大写)解析，所以本章节定义的变量都没有大写，用_来分割单词。如果强行用驼峰标识，浏览器则无法显示内容。

 

强行驼峰标识

 

 

使用驼峰标识的变量无法显示