收藏
回答

怎么在组件里面时时监听app.js里面的变量变化?

我有一个需求 要时时获取消息数量 然后赋值给自定义tabbar的组件里面渲染 我把变量存在了app.js里面

回答关注问题邀请回答
收藏

1 个回答

  • TNT
    TNT
    04-07

    app.js页面消息数量变化后发个广播给自定义组件,自定义组件开始监听接收消息数量。

    /* 小程序广播组件 */
    const broadcast = {
      // 通过调用 broadcast.on 注册事件。其他页面都可以通过调用 broadcast.fire 触发该事件
      // 参数说明:如果 isUniq 为 true,该注册事件将唯一存在;如果值为 false或者没有传值,每注册一个事件都将会被存储下来
      on: function(name, fn, isUniq) {
        this._on(name, fn, isUniq, false)
      },
      // 通过调用 broadcast.once 注册的事件,在触发一次之后就会被销毁
      once: function(name, fn, isUniq) {
        this._on(name, fn, isUniq, true)
      },
      _on: function(name, fn, isUniq, once) {
        var eventData
        eventData = broadcast.data
        var fnObj = {
          fn: fn,
          once: once
        }
        if (!isUniq && eventData.hasOwnProperty(name)) {
          eventData[name].push(fnObj)
        } else {
          eventData[name] = [fnObj]
        }
        return this
      },
      // 触发事件
      // 参数说明:name 表示事件名,data 表示传递给事件的参数
      fire: function(name, data, thisArg) {
        var fn, fnList, i, len
        thisArg = thisArg || null
        fnList = broadcast.data[name] || []
        if (fnList.length) {
          for (i = 0, len = fnList.length; i < len; i++) {
            fn = fnList[i].fn
            fn.apply(thisArg, [data, name])
            if (fnList[i].once) {
              fnList.splice(i, 1)
              i--
              len--
            }
          }
        }
        return this
      },
      data: {}
    }
    module.exports = broadcast
    


    // app.js,引入上述的js文件,发送广播通知
    broadcast.fire('事件名', data) // 发送的事件名及更改的值。
    
    // 页面监听接收通知
    broadcast.on('事件名', (data) => {
      // 执行逻辑,data为app.js传递过来的
    });
    



    04-07
    有用
    回复 6
    • 天选之子
      天选之子
      04-07
      好的 我尝试一下 谢谢
      04-07
      回复
    • 天选之子
      天选之子
      04-07
      我在组件里面没有像对应可以实时监听broadcast.on()的钩子函数,哪怕broadcast.fire()这个事件注册了一百个
      04-07
      回复
    • TNT
      TNT
      04-07回复天选之子
      组件内 attached里执行broadcast.on
      04-07
      回复
    • TNT
      TNT
      04-07回复天选之子
      04-07
      回复
    • 天选之子
      天选之子
      04-07回复TNT
      可以了 谢谢哈
      04-07
      回复
    查看更多(1)
登录 后发表内容