uniapp全局传参 uni.$on uni.$emit(‘updateBack‘

【代码】uniapp全局传参 uni.$on uni.$emit(‘updateBack‘

胡小逗儿

1127人浏览 · 2024-12-10 10:42:43

胡小逗儿 · 2024-12-10 10:42:43 发布

一、常规用法

1、知识

注意
uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等
使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.$on 注册监听，onUnload 里边 uni.$off 移除，或者一次性的事件，直接使用 uni.$once 监听

2、传参界面

// 返回
			back() {
				let that = this
				console.log('leftClick',that.backOptions);
				// 全局传参 是否更新update:true，原options参数
				uni.$emit('updateBack',{update:that.updateBack,options:that.backOptions})
                //全局返回方法
				this.$utils.toFormBack('MaterialList', 'MaterialForm')

			},

3、接收界面

onLoad(options) {
			let that = this
			this.options = options
			uni.setStorageSync("scanIndex", 'MaterialList')
			if (options && options.input) {
				this.searchForm.input = options.input
			} else {
				this.searchForm.input = ''
			}
			// uni.startPullDownRefresh();
			that.onRefresh()

			uni.$on('updateBack', function(data) {
				console.log('update', data, data.options, that.options)
				if (data && data.update) { //更新监听 data.update == true
					let backOptions = JSON.parse(decodeURIComponent(encodeURIComponent(data.options)))
					that.options = backOptions
					console.log('options', options, backOptions)
					//触发更新后
					that.onRefresh()
				}
				console.log(178)
			})
		},
		//为了优化代码，可以加上移除事件，避免重复监听事件
		onUnload() {
			// 移除监听事件  
			uni.$off('updateBack');
		},
      methods: {
			// 刷新
			onRefresh() {
				let that = this
				// 通过扫码获取code
				if (that.options && that.options.scanCode && that.options.type) {
					that.stringCode = decodeURIComponent(encodeURIComponent(that.options.scanCode)).replace(
						/"/g,
						'');
					console.log(171, that.stringCode, that.options.type);
					that.isLastPage = false
					that.initScanCode(that.stringCode, that.options.type)
				} else {
					console.log(175, that.stringCode, that.options);
					that.searchInput(this.searchForm.input)
				}
			},
         }

二、第二种方式，放在onShow里面

1、目前使用好处：

1、没有操作直接返回不刷新数据；

2、多次点击form,list,使用navigateBack会保留页面，onshow会多次请求数据，则使用lodash延迟解决；

3、form修改后返回到list会及时更新数据，且不会叠加；

2、传参界面

form


		data() {
			return {
				backOptions: null,
				backSearchForm: null,
				updateBack: false,
                    }
                }，
onLoad(options) {
			// console.log(151, options);
			if (options && options.options) {
				this.backOptions = options.options
				console.log(140, 'this.backOptions', this.backOptions)
			}
			if (options && options.searchForm) {
				this.backSearchForm = options.searchForm
				console.log(140, 'this.backSearchForm', this.backSearchForm)
			}
			if (options && options.stringRow && options.method) {
				let row = JSON.parse(decodeURIComponent(encodeURIComponent(options.stringRow)))
				this.method = options.method
				this.radiovalueName = options.radiovalueName
				console.log(155, row);
				this.init(row, options.method)
			}
		},
		// 监听物理返回按钮事件
		onBackPress(e) {
			console.log('onBackPress,离开 navigateBack', e, e.from)
			if (e.from == 'backbutton') {
				this.back()
				return true
			}
		},

methods: {
// 返回
			back() {
				let that = this
				// 全局传参 是否更新update:true，原options参数
				if (that.updateBack) {
					uni.$emit('isRefresh', {
						update: that.updateBack,
						options: that.backOptions,
						searchForm: that.backSearchForm,
					})
                    //统一做返回方法
					that.$utils.toFormBack('TransferLocationList', 'TransferLocationForm')

				} else {
					uni.navigateBack({
						delta: 1,
					});
				}
				console.log('leftClick', that.updateBack);
				// 
			},
}

3、接收界面

list

使用lodash，例如500毫秒内只执行一次,避免重复请求多次数据，onshow里面会出现多次请求数据的情况


	import _ from 'lodash';

	export default {
		onShow(options) {
			let that = this
			console.log(186, this.isRefresh, options, options && options.scanCode && options.type)
			uni.$once('isRefresh', function(data) {
				console.log('监听到事件来自返回的参数：' + data);
				// TODO 下面执行刷新的方法
				console.log(218, 'isRefresh', data)
				if (data && data.update) { //更新监听 data.update == true
					let backOptions = JSON.parse(decodeURIComponent(encodeURIComponent(data.options)))
					let backSearchForm = JSON.parse(data
						.searchForm) //JSON.parse(decodeURIComponent(encodeURIComponent(data.searchForm)))
					that.options = backOptions
					that.searchForm = backSearchForm
					console.log(183, 'options', options, backOptions, that.searchForm, backSearchForm)

					// that.$nextTick(() => {
						// 加延迟,防止触发上拉刷新，数据重叠
						setTimeout(() => {
							this.dataList = []
							//触发更新后
							that.onRefresh()
						}, 0)
					// })
				}
				console.log(178)
				// 移除监听事件
				uni.$off('isRefresh');
			})
			uni.setStorageSync("scanIndex", 'TransferLocationList')

		},

		methods: {

			// 刷新
			onRefresh: _.debounce(function() {
				let that = this
				let option = that.options
				console.log(245, option);
				// 通过扫码获取code
				if (!!this.searchForm.input) {
					this.searchInput(this.searchForm.input)
				} else if (option && option.scanCode) {
					this.searchScanCodeForm.sn = decodeURIComponent(encodeURIComponent(option.scanCode)).replace(/"/g, '');
					console.log(155, this.searchScanCodeForm);
					this.dataList = []
					this.initScanCode()
				} else {
					if (!!this.searchForm.input) {
						this.searchInput(this.searchForm.input)
					}
				}
			}, 500), // 例如500毫秒内只执行一次,避免重复请求多次数据

			// 跳转到详情
			onClickRowEvent(row) {
				// console.log(279)
				let method = 'view'
				// encodeURIComponent 数据编码不然获取不到
				uni.navigateTo({
					url: '/packageWorkbench/pages/vue/transfer/TransferLocationForm?method=' + method +
						'&stringRow=' + encodeURIComponent(JSON.stringify(row)) +
						'&options=' + encodeURIComponent(JSON.stringify(this.options)) +
						'&searchForm=' + encodeURIComponent(JSON.stringify(this.searchForm))
				})
			},

                }
}

4、公共功能

util.js


// 点击顶部标题左边返回按钮
export function toFormBack(list, form) {

	console.log('leftClick', list, form);
	let pagesRutes = getCurrentPages() // 获取栈实例
	// console.log('pagesRutes', pagesRutes) //注释打印解决toJSON报错问题
	let pagesRute = pagesRutes[pagesRutes.length - 1] //获取当前页面的数据，包含页面路由
	// console.log('pagesRute', pagesRute)
	// 盘库扫码返回特殊处理
     if (form == 'TransferLocationForm' && pagesRutes.length == 1) { //
		console.log(325, 'TransferLocationForm')
		uni.reLaunch({
			url: '/packageWorkbench/pages/vue/transfer/TransferLocationList?scanCode=' + uni.getStorageSync(
				"checkSn")
		})

	} else if (pagesRutes.length == 2) {
		console.log('leftClick', 332);
		// console.log('pagesRutes1', pagesRutes)
		let pagesRute0 = pagesRutes[0] //获取当前页面的数据，包含页面路由
		if (pagesRute0 && pagesRute0.route && pagesRute0.route.indexOf(list) != -1) {
			console.log('leftClick', 336,pagesRute0 , pagesRute0.route);
			uni.navigateBack({
				delta: 1,
			});
		} else {
			uni.reLaunch({
				url: '/pages/index/index?PageCur=workbench'
			})
		}
	} else {
		console.log('leftClick', 345);
		// console.log('pagesRute2', pagesRute)
		// console.log(pagesRute && pagesRute.route && pagesRute.route.indexOf(form) != -1,
		// 	pagesRutes
		// 	.length > 2)
		if (pagesRute && pagesRute.route && pagesRute.route.indexOf(form) != -1) {
			if (pagesRutes.length > 2) {
				console.log('leftClick', 352);
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.reLaunch({
					url: '/pages/index/index?PageCur=workbench'
				})
			}

		} else {
			console.log('leftClick', 362);
			uni.navigateBack({
				delta: 1
			});
		}
	}
}

module.exports = {
	toFormBack: toFormBack,
}

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

水母快写SEO站长工具实战指南：从流量低迷到精准获客

cover

从小白到专家：掌握文件系统重塑AI上下文工程的核心技术（必收藏）

cover

程序员必看！企业最实用的21个AI应用场景：老板都在偷偷用，效率飙升

所有评论(0)

查看更多评论

胡小逗儿

已为社区贡献3条内容