评论

小程序多组件高复杂度实现方案

单页面高度复杂,以人力换取时间,人员互不影响

备注:此方法多适用于多模块高复杂度多插件的页面开发

原理:应用事件总线进行事件传递,并将数据挂载到wx上用于各个组件模块共享

一、事件总线

  1. 事件总线挂载在wx对象上wx.eventBus
  2. 派发事件 wx.eventBus.$emit('name',params)
  3. 监听事件 wx.eventBus.$on('name',fn)

示例:

// 派发事件addCart 传递参数为1
wx.eventBus.$emit("addCart", 1)

// 监听事件 
// 方式1
wx.eventBus.$on("addCart", num => {
     this.setData({ number: num });
});
// 方式2 this.setNum为methods中的方法
wx.eventBus.$on("addCart", this.setNum).bind(this);

二、共享数据

  1. 设置共享数据wx.setShareData(data)
  2. 获取共享数据wx.getShareData()

示例:

// 设置共享数据 一般为主页面设置共享数据,组件更新部分数据
wx.setShareData({
    data: {
        spu,
        sku,
        watch,
        postageFee
    },
    chooseSkuInfo, // 选择的sku
    footerBtnType,
    pageSetting,
    closeCommunity: false
});

// 获取共享数据
const {
    footerBtnType,
    pageSetting,
    chooseSkuInfo,
    data: { sku }
} = wx.getShareData()

// 组件中 更新部分数据
wx.setShareData({
    chooseSkuInfo: { ...item, number: 1 }
});
最后一次编辑于  2020-08-19  
点赞 32
收藏
评论

19 个评论

  • Wei.
    Wei.
    发表于小程序端
    2020-08-19
    每天学习一点新知识 开心🥳
    2020-08-19
    赞同 5
    回复 1
    • L²⁰²⁴
      L²⁰²⁴
      2020-09-28
      2020-09-28
      回复
  • 瑾、瑜
    瑾、瑜
    发表于小程序端
    2020-08-19
    学习了
    2020-08-19
    赞同 3
    回复
  • hi_story
    hi_story
    发表于小程序端
    2020-08-19
    厉害厉害👍
    2020-08-19
    赞同 2
    回复
  • 发表于小程序端
    2020-08-19
    不明觉厉
    2020-08-19
    赞同 2
    回复
  • 发表于小程序端
    2020-08-21
    666666,get新技能
    2020-08-21
    赞同 1
    回复
  • 赵辛酸
    赵辛酸
    发表于小程序端
    2020-08-21
    学研发的第二天 打卡
    2020-08-21
    赞同 1
    回复
  • 14
    14
    发表于小程序端
    2020-08-19
    厉害
    2020-08-19
    赞同 1
    回复
  • 秀秀
    秀秀
    发表于小程序端
    2020-08-19
    学习了
    2020-08-19
    赞同 1
    回复
  • 东敷
    东敷
    发表于小程序端
    2020-08-19
    打开知识新大门🤯
    2020-08-19
    赞同 1
    回复
  • 国家重点养猪工程高级技工
    国家重点养猪工程高级技工
    发表于小程序端
    2020-08-21
    学习
    2020-08-21
    赞同
    回复

正在加载...

登录 后发表内容