优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突

场景

当前有个页面，此页面有个 tabs，点击对应的 tabs 下面显示不同的模块，且每个模块都有上拉刷新的功能

<!-- page页面 -->
<Statistics v-if="tabIndex == 1" />
<RealTime v-else-if="tabIndex == 2" />

要实现的效果： 上拉刷新时，值刷新对应的模块

处理方法

第一种：page 页面监听上拉刷新，然后通过 refs 调用对应的模块暴露出来的刷新方法（不推荐）

给所有子模块加上 ref
所有子模块暴露一个方法，用来刷新本模块的数据
page 页面监听 onPullDownRefresh 事件，通过判断当前是哪个模块，来通过 ref 调用该模块的刷新方法

优点：

写起来简单

缺点：

如果模块过多则改起来非常恶心，只能一个一个加。
如果子模块中的数据不是子模块的，而是子模块的下级，或者下下级呢？那就需要从最底下的那一层开始暴露方法，然后一层一层的向上传递，最后传到 page 页面，写起来很复杂，而且耦合度太高了

第二种：在 page 页面定义一个对象来对所有的模块的上拉刷新进行管理

page 页面定义一个对象，储存所有上拉刷新要触发的方法，再定义两个添加或删除属性的函数

// 下拉的方法组成的对象
const pullRefreshEvent = {};
/*** 添加事件* @param {string} key 事件的key（唯一值）* @param {function} fun 要执行的方法*/
function addPullRefreshEvent(key, fun) {pullRefreshEvent[key] = fun;
}
function removePullRefreshEvent(key) {delete pullRefreshEvent[key];
}

page 页面监听 onPullDownRefresh 事件，循环管理方法的对象，执行所有的方法

onPullDownRefresh(() => {for (let key in pullRefreshEvent) {pullRefreshEvent[key] && pullRefreshEvent[key]();}
});

父组件向外暴露方法，供子模块调用

defineExpose({addPullRefreshEvent,removePullRefreshEvent,
});

子模块拿到 page 页面，并在初始化时往管理上拉刷新方法的对象里添加唯一的 key 和要执行的方法

const page = getCurrentPage();
const pullRefreshEventKey = "realTime" + Date.now();// 添加下拉刷新事件
page.$vm.addPullRefreshEvent(pullRefreshEventKey, async () => {// 如果当前选择的不是本模块，则不刷新//.....要做得事情uni.stopPullDownRefresh();
});

子模块在被销毁时移除掉上拉刷新的方法

onUnmounted(() => {page.$vm.removePullRefreshEvent(pullRefreshEventKey);
});

此方法主要是使用了面向对象的处理思维，高内聚，只需在需要注册事件的模块去进行添加或移除自己要执行的方法，把所有需要执行的方法交给 page 页面进行统一的管理，这样不会导致代码写的杂乱不易维护，这样即使组件模块套的再深也不会增加代码量！

优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突相关推荐

微信小程序 - 在自定义组件中请求后端 API 数据接口（引入该组件的页面触发）组件在哪个生命周期钩子函数中请求接口数据呢？
前言我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序组件(comp ...
React组件（进阶--生命周期）
目录一.生命周期 - 概述二.生命周期 - 挂载阶段三.生命周期 - 更新阶段四.生命周期 - 卸载阶段文章推荐: 1.JSX基础(入门) 2.React组件(入门) 3.React组件动状 ...
Android四大基本组件介绍与生命周期
Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...
Android基础_1 四大基本组件介绍与生命周期
Android四大基本组件分别是Activity,Service(服务),Content Provider(内容提供者),BroadcastReceiver(广播接收器). 一.四大基本组件 Acti ...
[react] react的函数式组件有没有生命周期？
[react] react的函数式组件有没有生命周期? 没有个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] 函数式组件有没有生命周期？为什么？
[react] 函数式组件有没有生命周期?为什么? 没有生命周期因为他没有继承React.Component 所以也不需要render() 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
Vue父子组件及mixins生命周期执行顺序
图为Vue生命周期生命周期分别为 1. 创建前后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象Data都为undefined,还未初始化.created阶段,vue实例的 ...
微信小程序：uni-app页面Page和组件Component生命周期执行的先后顺序
目录 H5 微信小程序测试代码文档页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 组件生命周期 https:// ...
【解决】uniapp，无法在onLoad及onUnload生命周期内触发激光扫码的监听事件，可在created及beforeDestroy生命周期内触发
[问题] uniapp开发App,发现无法在onLoad及onUnload生命周期内触发及销毁子组件内的激光扫码的监听事件. 子组件内示例代码如下: <script> export def ...

优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突

优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突

场景

处理方法

第一种：page 页面监听上拉刷新，然后通过 refs 调用对应的模块暴露出来的刷新方法（不推荐）

第二种：在 page 页面定义一个对象来对所有的模块的上拉刷新进行管理

优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突相关推荐

最新文章

热门文章