如何在组件中，调用父元素的方法
- 组件中可以往外边激活一个事件
this.triggerEvent('自定义事件名'),父页面调用的时候监听这个事件并处理
比如，当歌曲播放到进度条末尾的时候，会触发onEnded事件，在这个事件中我们可以调用播放下一首按钮绑定的函数，就可以实现自动播放下一首的效果。
假如，歌曲进度条，我们是封装成了一个独立的组件，然后我们在歌曲播放界面引入了进度条组件。
image.png
那么我们该怎么在进度条组件的js里，调用父页面里定义的方法呢？
// 监听背景音频自然播放结束事件
backgroundAudioManager.onEnded(() => {
console.log("onEnded")
this.triggerEvent('musicEnd')
})
// 然后在父页面调用的组件上监听这个组件激活的事件，并指定事件处理函数
<view class="progress-bar">
<cus-progress-bar
bind:musicEnd="onNext"
bind:timeUpdate="timeUpdate"
bind:musicPlay="onPlay"
bind:musicPause="onPause"
isSame="{{isSame}}"
/>
</view>
// 然后在该事件处理函数里，再做相关的处理
onNext(){
nowPlayingIndex++
if(nowPlayingIndex === musiclist.length){
nowPlayingIndex = 0
}
this._loadMusicDetail(musiclist[nowPlayingIndex].id)
},
同级别组件如何通信
- 比如A组件和B组件都别C组件引用。那么A组件的数据如何传递给B组件？
// A组件中
// sendData是自定义的名称，是A组件激活的自定义事件
this.triggerEvent('sendData')
//C组件调用A组件时，在组件上监听
<x-A bind:sendData="sendData"><x-A/>
// 然后C组件在监听到A组件传递过来的sendData事件后，会执行sendData事件处理函数
sendData(event){
// 我们调用组件B的时候，给它添加一个类名，然后通过类名获取到组件B的实例对象
// 然后就可以访问到B组件的任意属性和方法
// 我们事先在B组件中，定义了一个update方法，接收一个num参数
// 我们就可以在C组件中，通过B的实例对象触发update方法，并把A组件传递的数据num传给update
// 父组件可以通过事件监听函数的event参数获取到子组件传递的数据 event.detail.num
this.selectComponent('类名').update(event.detail.num) // 然后B组件就可以在update方法中获取到A传递的数据了
}
设置全局属性
//app.js
App({
onLaunch: function (options) {
console.log('onLaunch 执行')
console.log(options)
this.checkUpdate()
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
// env 参数说明：
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境（第一个创建的环境）
env: 'development-8gcxm1si2cfdf385',
traceUser: true,
})
}
this.getOpenId()
this.globalData = {
playingMusicId:-1,
}
},
setPlayingMusicId(musicId){
this.globalData.playingMusicId = musicId
},
getPlayingMusicId(){
return this.globalData.playingMusicId
},
})
- 然后在其他页面，获取到app的实例，就可以放访问到app的全局属性和方法了
