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

vue 父子(上下级)通信 props 

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

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

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

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

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

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

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

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

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

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

公司

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

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

一个人搞所有东西

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

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

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

董事长职权

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

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

董事职权

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

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

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

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

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

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

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

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

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

渲染

浏览器显示内容

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

浏览器显示内容

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

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

父子通信的本质

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

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

强行驼峰标识
vue小故事之父子(上下级)通信之父传子props-LMLPHP

使用驼峰标识的变量无法显示
05-12 05:41