Uniapp中父子页面传值

效果

实现

A页面

点击图一按钮进入图二页面

<view class="cu-form-group margin-top">
			<button class="cu-btn sm bg-gradual-green" style="margin-left: 70%; " @click="selectMaterial">
				选择物料
			</button>
		</view>
selectMaterial() {
				let _this = this
				uni.navigateTo({
					url: '/pages/product/PartsMaterialSelect',
					events: {
						materialData: function(data) {
							console.log('返回值', data)
						}
					}
				})
			},

B页面

B页面绑定了C页面，主要用来传值
同时加载B页面时调用后端接口，返回查找值

view class="scrollbox">
			<scroll-view scroll-y="true">
				<MaterialCardParts :materials="materials"></MaterialCardParts>
			</scroll-view>
		</view>
		<view class="padding-xs">
			<uni-pagination :current="currentPage" :total="totals" :pageSize="total" @change="handlePage">
			</uni-pagination>
			<text style="margin-left: 28%;">总数:{{totals}}条，每页最多:{{total}}条</text>
		</view>

//获取所有的MaterialCode
			getAllMaterialCode() {
				let _this = this;
				let params = {
					pageIndex: _this.currentPage,
					pageSize: _this.total
				};
				uni.request({

					url: apiUrl + '/GetAllMaterialCode',
					method: "POST",
					data: params,
					success: (res) => {
						console.log('返回值2', res.data.data)
						_this.materials = res.data.data.ret;
						_this.totals = res.data.data.pageTotal
					},
					fail: (res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					},
				})
			}

C页面（B的子页面）

<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th width="80" align="center">物料编码</uni-th>
					<uni-th width="80" align="center">物料名称</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in materials" :key="index">
					<uni-td>{{ item.materialCode }}</uni-td>
					<uni-td>
						<view class="name">{{ item.materialName }}</view>
					</uni-td>
				</uni-tr>
			</uni-table>

props: {
			materials:{
				 type: Array,
				 default: () => []				
			},
			func: {
				type: Object,
				value: null
			}
		}

思路

父页面可以将获取到的数据作为props属性传递给子页面。在父页面中，将数据作为props属性的值传递给子页面组件。在子页面组件中通过props接收数据并在页面中使用。