美文网首页
MPVue传值

MPVue传值

作者: 我的名字就这么长 | 来源:发表于2019-03-18 10:59 被阅读0次

    最近上手mpvue开发微信小程序,发现mpvue官网没有提供页面反向传值的解决方案,于是广查资料,知道eventbus解决方案,再结合之前的iOS通知,写了一个文件来实现pages间的反向传值。
    1、新建一个notification.js文件

    // 用来存放监听事件
    let _notifications = []
    
    /* 添加监听事件
    * notificationName  事件传递名称
    * selector          事件回调函数
    * observe           事件监听者
    * */
    function addNotification (notificationName, selector, observe) {
      console.log('addNotification=', notificationName, 'selector=', selector, 'observe=', observe)
      if (!notificationName || !selector || !observe) {
        console.log('addNotification error')
        return
      }
    
      let alreadyNotifi = false
      try {
        _notifications.forEach(item => {
          if (item.name === notificationName && item.selector === selector && item.observe === observe) {
            alreadyNotifi = true
            throw new Error('该实例或组件已添加该通知')
          }
        })
      } catch (e) {
        if (e.message !== '该实例或组件已添加该通知') {
          throw e
        }
      }
    
      if (alreadyNotifi) {
        console.log('该实例或组件已添加该通知')
        return
      }
    
      let notification = {
        name: notificationName,
        selector: selector,
        observe: observe
      }
    
      _notifications.push(notification)
    }
    
    /* 发送通知
    * notificationName 事件名称
    * payload          事件回调函数所需参数
    * */
    function postNotification (notificationName, payload) {
      console.log('postNotification=' + notificationName, 'payload=', payload)
      if (!notificationName) {
        console.log('postNotification error')
        return
      }
    
      _notifications.forEach(item => {
        if (item.name === notificationName) {
          item.selector(payload)
        }
      })
    }
    
    /* 移除监听
    * notificationName 事件名称
    * observe          监听者
    * */
    function removeNotification (notificationName, observe) {
      console.log('removeNotification=' + notificationName, 'observe=', observe)
      if (!notificationName || !observe) {
        console.log('removeNotification error')
        return
      }
    
      _notifications.forEach((item, index) => {
        if (item.name === notificationName && item.observe === observe) {
          _notifications.splice(index, 1)
        }
      })
    }
    
    export default {
      addNotification,
      postNotification,
      removeNotification
    }
    

    2、在需要添加监听的地方

    // 2.1
      import notificationCenter from '../../utils/notification'
    //2.2
      notificationCenter.addNotification('fromdetail', this.fromdetail, this)
    

    3、在发起通知的地方

    //3.1
      import notificationCenter from '../../utils/notification'
    //3.2
     onLoad () {
       notificationCenter.addNotification('fromindex', this.fromindex, this)
     },
     onUnload () {
       notificationCenter.removeNotification('fromindex', this)
     },
    

    相关文章

      网友评论

          本文标题:MPVue传值

          本文链接:https://www.haomeiwen.com/subject/dszmmqtx.html