企业信息化建设网站,wordpress做门户网,网站建设的案例教程视频教程,小程序联盟商家版文章目录 父传子子传父获取组件实例兄弟通信 父传子
知识点#xff1a;
父组件如果需要向子组件传递指定属性的数据#xff0c;在 WXML 中需要使用数据绑定的方式
与普通的 WXML 模板类似#xff0c;使用数据绑定#xff0c;这样就可以向子组件的属性传递动态数据。
父… 文章目录 父传子子传父获取组件实例兄弟通信 父传子
知识点
父组件如果需要向子组件传递指定属性的数据在 WXML 中需要使用数据绑定的方式
与普通的 WXML 模板类似使用数据绑定这样就可以向子组件的属性传递动态数据。
父组件如果需要向子组件传递数据只需要两个步骤
1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据
2.子组件内部使用 properties 接收父组件传递的数据即可
知识点代码
!-- 引用组件的页面模板 --
viewcostom prop-a{{ name }} prop-b{{ age }} /
/view在组件内部需要在 Component 构造器中通过 properties 接收传递的数据接收方式有两种
Component({/*** 组件的属性列表 props*/properties: {propA: {type: String, // 传递的数据类型value: // 默认值},propB: Number // 简化的定义方式},// coding...
})
在子组件中也可以通过 this.setData() 对 properties 中的数据进行修改但是一般不建议修改
// components/custom01/custom01.js
Component({/*** 组件的方法列表*/methods: {// 修改列表中的数据updateProp () {this.setData({propB: this.properties.propB 1})}}
})
子传父
子组件如果需要向父组件传递数据可以通过小程序提供的事件系统实现传递传递可以传递任意数据。
事件系统是组件间通信的主要方式之一自定义组件可以触发任意的事件引用组件的页面可以监听这些事件流程如下
自定义组件触发事件时需要使用 triggerEvent 方法发射一个自定义的事件自定义组件标签上通过 bind 方法监听发射的事件
触发事件
!-- 在自定义组件中 --
button typeprimary plain bindtapsendData传递数据/button// components/custom05/custom05.js
Component({// 组件的初始数据data: {num: 666},// 组件的方法列表methods: {// 将数据传递给父组件sendData () {// 如果需要将数据传递给父组件// 需要使用 triggerEvent 发射自定义事件// 第二个参数是携带的参数this.triggerEvent(myevent, this.data.num)}}
})监听事件
view{{ num }}/view
!-- 需要在自定义组件标签上通过 bind 方法绑定自定义事件同时绑定事件处理函数 --
custom05 bind:myeventgetData /Page({data: {num: },getData (event) {// 可以通过事件对象.detail 获取子组件传递给父组件的数据// console.log(event)this.setData({num: event.detail})}})
获取组件实例
如果前面两种方式不足以满足需要。
可在父组件里调用 this.selectComponent() 获取子组件的实例对象就可以直接拿到子组件的任意数据和方法。调用时需要传入一个匹配选择器 selector如this.selectComponent(.my-component)。
!-- 父组件 --
costom bind:myeventgetData classcustom /
button bindtapgetChildComponent/button// 父组件
Page({data: {},getChildComponent: function () {const child this.selectComponent(.custom)console.log(child)}
})兄弟通信
如果一个页面通过 wx.navigateTo 打开一个新页面这两个页面间将建立一条数据通道 在 wx.navigateTo 的 success 回调中通过 EventChannel 对象发射事件 被打开的页面可以通过 this.getOpenerEventChannel() 方法获得一个 EventChannel 对象进行监听、发射事件 wx.navigateTo 方法中可以定义 events 配置项接收被打开页面发射的事件
这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。 代码
页面 .js 文件
Page({// 点击按钮触发的事件处理函数handler () {wx.navigateTo({url: /pages/list/list,events: {// key被打开页面通过 eventChannel 发射的事件// value回调函数// 为事件添加一个监听器获取到被打开页面传递给当前页面的数据currentevent: (res) {console.log(res)}},success (res) {// console.log(res)// 通过 success 回调函数的形参可以获取 eventChannel 对象// eventChannel 对象给提供了 emit 方法可以发射事件同时携带参数res.eventChannel.emit(myevent, { name: tom })}})}})被页面 .js 文件
Page({onLoad () {// 通过 this.getOpenerEventChannel() 可以获取 EventChannel 对象const EventChannel this.getOpenerEventChannel()// 通过 EventChannel 提供的 on 方法监听页面发射的自定义事件EventChannel.on(myevent, (res) {console.log(res)})// 通过 EventChannel 提供的 emit 方法也可以向上一级页面传递数据// 需要使用 emit 定义自定义事件携带需要传递的数据EventChannel.emit(currentevent, { age: 10 })}})
