欢迎来到淘文阁 - 分享文档赚钱的网站! | 帮助中心 好文档才是您的得力助手!
淘文阁 - 分享文档赚钱的网站
全部分类
  • 研究报告>
  • 管理文献>
  • 标准材料>
  • 技术资料>
  • 教育专区>
  • 应用文书>
  • 生活休闲>
  • 考试试题>
  • pptx模板>
  • 工商注册>
  • 期刊短文>
  • 图片设计>
  • ImageVerifierCode 换一换

    5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战(微课版).pptx

    • 资源ID:90590440       资源大小:2.39MB        全文页数:16页
    • 资源格式: PPTX        下载积分:10金币
    快捷下载 游客一键下载
    会员登录下载
    微信登录下载
    三方登录下载: 微信开放平台登录   QQ登录  
    二维码
    微信扫一扫登录
    下载资源需要10金币
    邮箱/手机:
    温馨提示:
    快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。
    如填写123,账号就是123,密码也是123。
    支付方式: 支付宝    微信支付   
    验证码:   换一换

     
    账号:
    密码:
    验证码:   换一换
      忘记密码?
        
    友情提示
    2、PDF文件下载后,可能会被浏览器默认打开,此种情况可以点击浏览器菜单,保存网页到桌面,就可以正常下载了。
    3、本站不支持迅雷下载,请使用电脑自带的IE浏览器,或者360浏览器、谷歌浏览器下载即可。
    4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩,下载后原文更清晰。
    5、试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。

    5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战(微课版).pptx

    5-4 5.5 组件之间的通信教学课件 Vue.js 基础与应用开发实战(微课版)5.5 组件之间的通信在Vue中,组件之间的通信有父子组件之间、兄弟组件之间、祖先组件与后代组件之间等通信。父组件通过props选项把数据传递给子组件,子组件的props选项能够接收来自父组件的数据。props是从上到下的单向数据流传递,且父级组件的props更新会向下流动到子组件中,但是反过来则不可以。我们可以使用一个比方说,父子组件之间的数据传递相当于自上而下的下水管子,只能从上往下流,不能逆流,这也正是Vue的设计理念之单向数据流。而Props可以理解为管道与管道之间的一个衔接口,这样水才能往下流。$emit能够实现子组件向父组件传递数据,子组件使用$emit触发父组件中定义的事件,子组件的数据信息通过传递参数方式完成,在父组件中使用v-on/自定义事件进行监听即可。5.5.1 父组件向子组件传递数据父组件传递数据到子组件使用props选项,并且这传递是单向的,只能由父组件传到子组件。我们将上面示例中的父组件增加一个数据传递到子组件中渲染显示,如果父组件需要传多个数据给子组件,依次在后面加即可。【示例】:demo050501.html实现过程与代码如下:(1)在父组件中增加msg,并绑定到子组件上代码如下:var parentNode=Vue.extend(template:这是父组件,data()return msg:这是父组件传给子组件的数据:123,components:child:childNode);中的“:pdata”是“v-bind:pdata”的缩写,pdata是自定义传递数据的命名,子组件中也是用该名字获取数据,msg是父组件中数据的命名。(2)在子组件中通过props获取数据,并渲染出来代码如下:var childNode=Vue.extend(template:这是子组件 pdata,props:pdata);由于父组件传递数据到子组件是单向的,父组件中数据发生变化,子组件中自动更新,但子组件不可直接修改通过props获取到的父组件中的数据。(3)创建根实例代码如下:var vm=new Vue(el:#app,components:parent:parentNode)5.5.2 子组件向父组件传递数据子组件给父组件传递数据通过$emit事件触发的方式实现,父组件使用v-on/自定义事件进行监听即可。在子组件中,可以通过以下方式监听事件:v-on:click=$emit(funcName,a)如果需要传多个参数,可以通过以下方式:v-on:click=$emit(funcName,a,b)父组件中通过自定义事件来监听子组件的事件,例如自定义事件名称childlistener,可以通过以下方式在父组件中进行监听:v-on:childlistener=parentMethod($event)$event就是子组件中传过来的参数,如果子组件传过来的是一个参数,则$event等于该参数;如果传过来的是一个对象,则$event为该对象,我们可以通过对象的方式获取对应的参数,例如$event.a,$event.b【示例】:demo050502.html实现过程与代码如下:(1)构建子组件代码如下:var childNode=Vue.extend(template:单 击 给 父 组 件 传 值,methods:change:function()this.$emit(posttoparent,10);子组件按钮绑定了一个click事件,单击按钮则执行change方 法,该 方 法 触 发 emit事 件,事 件 名 为posttoparent,并且带了一个参数10。(2)构建父组件代码如下:var parentNode=Vue.extend(template:子组件传递给父组件的值为:datafromchild,data()return datafromchild:,components:child:childNode,methods:getfromchild:function(val)this.datafromchild=val);父组件通过v-on指令接收emit事件,格式为:v-on:emit方法名=父组件方法父组件将接收到的参数赋值给datafromchild。(3)创建根实例代码如下:var vm=new Vue(el:#app,components:parent:parentNode)快乐学习!高效学习!祝学习进步!

    注意事项

    本文(5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战(微课版).pptx)为本站会员(春哥&#****71;)主动上传,淘文阁 - 分享文档赚钱的网站仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知淘文阁 - 分享文档赚钱的网站(点击联系客服),我们立即给予删除!

    温馨提示:如果因为网速或其他原因下载失败请重新下载,重复下载不扣分。




    关于淘文阁 - 版权申诉 - 用户使用规则 - 积分规则 - 联系我们

    本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

    工信部备案号:黑ICP备15003705号 © 2020-2023 www.taowenge.com 淘文阁 

    收起
    展开