小程序多组件高复杂度实现方案
备注:此方法多适用于多模块高复杂度多插件的页面开发
原理:应用事件总线进行事件传递,并将数据挂载到wx上用于各个组件模块共享
一、事件总线
- 事件总线挂载在wx对象上wx.eventBus
- 派发事件 wx.eventBus.$emit('name',params)
- 监听事件 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);
二、共享数据
- 设置共享数据wx.setShareData(data)
- 获取共享数据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 }
});