小程序组件/页面通信
原创
本文将讲解一些小程序中常用的几种通信方式，以及在什么场景中使用哪种方式通信。
页面跳转传递参数 wx.navigateTo
它有两种传递方法：
- 通过在url 上拼接参数
- 通过 events 上绑定事件，触发，监听 来传递参数
通过url 上拼接参数
wx.navigateTo({
url: '/pages/logs/logs?id=111',
})然后在跳转的目标组件中， onLoad 事件中接收参数
Page({
data: {
},
onLoad: function(option){
// {id: "111"}
const {id } = option
console.log(option) //'111'
}
})events 上绑定事件，触发，监听 来传递参数
通过在 A 组件在使用 navigateTo Api 跳转时，通过events属性注册事件，然后在 success 成功响应里 向 目标组件触发事件，最后在跳转的目标组件B 中 通过 eventChannel.on 来监听对应的事件即可。
// A 组件
wx.navigateTo({
url: '/pages/logs/logs?id=111',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(opitons) {
const {data} = opitons
console.log(`我接收到跳转路由传递过滤的参数acceptDataFromOpenedPage----------${data}`)
},
someEvent: function(opitons) {
const {data} = opitons
console.log(`我接收到跳转路由传递过滤的参数someEvent----------${data}`)
}
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: '测试传递' })
}
})在 b 组件中 通过 this.getOpenerEventChannel() 获取到 页面间事件通信通道，
然后使用通道的 on 方法来 监听 A 组件emit 触发的组件。
const eventChannel = this.getOpenerEventChannel()
eventChannel.on('acceptDataFromOpenerPage', function(opitons) {
const {data} = opitons
console.log(`11111111111-----${data}`)
})同时，在 B 组件中也可以在 onLoad 事件中， 通过 通道 直接 触发 emit ，反向 向 A 组件传递参数
// B 组件
const util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function(option){
console.log(option)
const eventChannel = this.getOpenerEventChannel()
// 监听A组件 emit 触发的事件
eventChannel.on('acceptDataFromOpenerPage', function(opitons) {
const {data} = opitons
console.log(`11111111111-----${data}`)
})
//反向 向 A 组件传递参数
eventChannel.emit('acceptDataFromOpenedPage', {data: '11111'});
eventChannel.emit('someEvent', {data: '22222'});
}
})navigateBack 传递参数
1. 获取页面栈信息 getCurrentPages()
let pages = getCurrentPages();2. 拿到要目标页面的实例数据信息
let prevPage = pages[pages.length - 2];3.设置要修改的值
这块可以直接修改目标页面中data定义的属性值
prevPage.setData({
status: 'TEST
})4.设置返回的页面层级
wx.navigateBack({
delta: 1 // 返回上一级页面。
})完整代码
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
piece: 333333333
})
wx.navigateBack({
delta: 1 // 返回上一级页面。
})父子组件通信 Component
子组件向父组件传递值
- 通过在 子组件中，写入事件，然后通过 triggerEvent 方法，指定事件名、detail对象和事件选项 ，来向父组件传递数据
// 子组件
var myEventDetail = {
tip: "我是子组件传递过的数据"
} // detail对象，提供给事件监听函数
var myEventOption = {} // 触发事件的选项, 可选
this.triggerEvent('getInfo', myEventDetail, myEventOption)
}triggerEvent****
它有3 个参数
- 事件名
- detail 对象， 放传递给父组件的数据
- 触发事件的配置 【可选】
触发事件的选项包括：
选项名 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
bubbles | Boolean | 否 | false | 事件是否冒泡 |
composed | Boolean | 否 | false | 事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部 |
capturePhase | Boolean | 否 | false | 事件是否拥有捕获阶段 |
- 父组件监听子组件触发的方法
父组件通过在 子组件上 绑定子组件定义的事件名然后指定一个事件，来接收子组件传递过来的数据
bind:子组件定义的事件名= “接收数据的方法”
<detail-form
bind:getInfo="getData"
>
</detail-form> getData(e){
console.log(e)
},通过e.detail 来获取传递过来的数据
父组件向子组件传值
可以直接在 子组件标签上传入要传递的属性和值即可。 需要在子组件中 定义 props，
<!-- 父组件 -->
<detail-form model:content="{{str}}" title="测试传入自定义属性">
</detail-form>父组件
Component({
properties: {
title: String,
content: String,
},
})<text> {{title}} </text>
<input model:value="{{content}}"/>子组件
父组件直接操作子组件
通过在 子组件标签上 绑定 class / ID ， 然后父组件可以通过 this.selectComponent ****方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法
<detail-form
bind:getInfo="getData"
class="myDetail"
>
</detail-form>// 父组件
getData(e){
console.log(e)
// 获取子组件实例
const child = this.selectComponent('.myDetail')
console.log(child)
// 调用子组件方法
child.getPersonal()
},原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。