小程序组件间通信

如何在组件中，调用父元素的方法

• 组件中可以往外边激活一个事件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的全局属性和方法了