Vue+Uniapp各种页面交互之间的传递参数和方法

1.业务需求

我的业务流程：me页面传递status到我的订单--》我的订单根据status获取后端数据list-》点击每个item根据itemId获取订单详情

很简单是不是，很普遍的业务流程。不过在这里我进行了模块的拆分。

先看我的整个模块划分的文件目录

我的订单、订单详情的ui

2.me页面传递status到我的订单--》我的订单根据status获取后端数据list

直接先看我的订单的html，orderList是我拆分的components 

<view>
		<!-- 状态分类 -->
		<uv-sticky bgColor="#fff" class="">
			<view style="width: 100%;">
				<uv-tabs :list="select.list" lineColor="#fff" @change="tab_change"
					:activeStyle="{ color: '#DE483D', 'font-weight': 'bold' }" :inactiveStyle="{ color: 'black' }"
					:current="select.current"></uv-tabs>
			</view>
		</uv-sticky>
		<!-- 订单列表 -->
		<OrderList ref="orderList"></OrderList>
		<!-- 分割线 -->
		<divider marginTop="40px" marginBottom="40px"></divider>
		<!-- 加载 -->
		<loading></loading> 
	</view>

当我的订单页面onLoad的时候需要实时渲染orderList的数据，orderList组件的暴露方法我们运用到vue3的defineExpose

orderList.vue(拆分的模块)

const onOpen = ({ index }) => {
		console.log(index)
		selectIndex.value = index
		getOrderListNet(selectIndex.value)//获取数据的方法
}

//暴露onOpen方法出去
defineExpose({
		onOpen
})

myOrderList.vue(我的订单页面)
onMounted(() => {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1]; // 获取当前页面实例
		const index = currentPage.options.index; // 从页面实例中获取传递的参数（me页面传递的status）
		console.log(index)
		orderList.value.onOpen({ index: index })//调用该模块暴露的方法 并且传递参数
})

          这里注意！！！！的是在拆分模块加载的时候在onLoad生命周期调用orderList.value.onOpen是不行的（ 因为页面onMounted是在页面各个子组件全部被挂载之后调用的 确保组件被挂载完毕之后再渲染数据才能让页面完整出来）而在onLoad里面的话我们的components模块还没有完全出来就已经把数据加载完毕了，会导致页面出不来 。

3.我的订单根据status获取后端数据list-》点击每个item根据itemId获取订单详情

一样的 拆分了

这里我获取前一个页面参数传递给子模块的方式不一样

myOrderDetail.vue（我的订单详情页面）
//onLoad在onMounted之前执行 所以可以这么做
onMounted(() => {
		if (orderDetail.value) {
			orderDetail.value.onOpen({ orderId: orderId.value })
		}
	})
onLoad(async (option) => {
		orderId.value = option.orderId
		getOrderDetailFn()
})

// 页面销毁之前传递函数 供前一个页面重新加载数据使用
	onBeforeUnmount(() => {
		uni.$emit('reloadData')
})

子模块一样的用defineExpose暴露方法获取数据，这里我就不展示了

4.还有一个细节 在我的订单详情里面我需要点击按钮 ，改变了这个订单的状态 再次返回前一个页面 前一个页面不刷新的问题。（同样涉及到页面交互的方式 ）

 这里我们想到了封装组件发送事件的方式是用的emit

看上面代码的onBeforeUnmount生命周期 利用uni.$emit发送事件 在前一个页面进行接收，在什么生命周期呢？

onShow里面，一旦页面展示看看有没有这个方法有的话就进行数据加载

myOrder.vue（我的订单页面）
// 重新加载数据
	onShow(() => {
		uni.$on('reloadData', reloadData())
})
const reloadData = () => {
		orderList.value.onOpen({ index: select.current })//再次加载list的数据
}

最后总结一下：在uniapp页面交互的几种方式

1. onLoad生命周期里直接获取
2. getCurrentPages()获取页面实例获取参数
3. 事件的转发和接收（uni.$emit和uni.$on）

以上是uniapp里面的

关于vue的通信方法还要很多，可以一起分享~