小程序多组件高复杂度实现方案
发布于 4 年前 作者 wzhang 1792 次浏览 来自 分享

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

原理:应用事件总线进行事件传递,并将数据挂载到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 }
});
10 回复

每天学习一点新知识 开心🥳

打开知识新大门🤯

学研发的第二天 打卡

厉害厉害👍

666666,get新技能

不明觉厉

回到顶部