《5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《5-4 5.5组件之间的通信ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（16页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、5-4 5.5 组件之间的通信教学课件 Vue.js 基础与应用开发实战（微课版）5.5 组件之间的通信在Vue中，组件之间的通信有父子组件之间、兄弟组件之间、祖先组件与后代组件之间等通信。父组件通过props选项把数据传递给子组件，子组件的props选项能够接收来自父组件的数据。props是从上到下的单向数据流传递，且父级组件的props更新会向下流动到子组件中，但是反过来则不可以。我们可以使用一个比方说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流，这也正是Vue的设计理念之单向数据流。而Props可以理解为管道与管道之间的一个衔接口，这样水才能往下流。$emi
2、t能够实现子组件向父组件传递数据，子组件使用$emit触发父组件中定义的事件，子组件的数据信息通过传递参数方式完成，在父组件中使用v-on/自定义事件进行监听即可。5.5.1 父组件向子组件传递数据父组件传递数据到子组件使用props选项，并且这传递是单向的，只能由父组件传到子组件。我们将上面示例中的父组件增加一个数据传递到子组件中渲染显示，如果父组件需要传多个数据给子组件，依次在后面加即可。【示例】：demo050501.html实现过程与代码如下：（1）在父组件中增加msg，并绑定到子组件上代码如下：var parentNode=Vue.extend(template:这是父组件,data
3、()return msg:这是父组件传给子组件的数据:123,components:child:childNode);中的“:pdata”是“v-bind:pdata”的缩写，pdata是自定义传递数据的命名，子组件中也是用该名字获取数据，msg是父组件中数据的命名。（2）在子组件中通过props获取数据，并渲染出来代码如下：var childNode=Vue.extend(template:这是子组件 pdata,props:pdata);由于父组件传递数据到子组件是单向的，父组件中数据发生变化，子组件中自动更新，但子组件不可直接修改通过props获取到的父组件中的数据。（3）创建根实例代码
4、如下：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=p
5、arentMethod($event)$event就是子组件中传过来的参数，如果子组件传过来的是一个参数，则$event等于该参数；如果传过来的是一个对象，则$event为该对象，我们可以通过对象的方式获取对应的参数，例如$event.a,$event.b【示例】：demo050502.html实现过程与代码如下：（1）构建子组件代码如下：var childNode=Vue.extend(template:单 击 给 父 组 件 传 值,methods:change:function()this.$emit(posttoparent,10);子组件按钮绑定了一个click事件，单击按钮则执行c
6、hange方 法，该 方 法 触 发 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)快乐学习！高效学习！祝学习进步！