5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战(微课版).pptx
-
资源ID:90590440
资源大小:2.39MB
全文页数:16页
- 资源格式: PPTX
下载积分:10金币
快捷下载
![游客一键下载](/images/hot.gif)
会员登录下载
微信登录下载
三方登录下载:
微信扫一扫登录
友情提示
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)快乐学习!高效学习!祝学习进步!