zoukankan      html  css  js  c++  java
  • 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项业务管理和操作,则相应地董事应该有2个人员来对接(定义在子组件的prop属性内2个字段),这里我们通过v-bind指令来实现,则有

     

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

     

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

     

    渲染
    渲染

     

    浏览器显示内容

     

    浏览器显示内容
    浏览器显示内容

     

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

     

    父子通信的本质
    父子通信的本质

     

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

     

    强行驼峰标识
    强行驼峰标识

     

     

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

     

  • 相关阅读:
    计算机漏洞安全相关的概念POC 、EXP 、VUL 、CVE 、0DAY
    开始使用kali的一些小问题:菜鸟瞎折腾
    nmap参数详解(罗列一下)
    安装kali之后必做的几件小事
    Debian下virtualBox增强功能出错
    ArcGIS Engine 基础功能(一)
    sublime 配置简单的python环境
    解决 ‘Could not fetch URL https://pypi.python.org’的问题
    golang基础语法学习
    大象盒子技术栈
  • 原文地址:https://www.cnblogs.com/singledogpro/p/12067664.html
Copyright © 2011-2022 走看看