uniapp 五种组件/页面间传递数据方式总结

下面以MyUserModel类的对象进行数据传输，类定义如下

export interface IUserModel {
    name: string,
    age: number
}

export class MyUserModel implements IUserModel {
    name: '';
    age: 0;
}

第一种：props （父传子）

适用于传递对象是组件

<!-- 子组件 -->
<template>
	<view>
		<uni-easyinput v-model="userData.name" placeholder="请输入姓名"></uni-easyinput>
		<uni-easyinput v-model="userData.age" placeholder="请输入年龄"></uni-easyinput>
		<button @click="save" type="primary" style="margin-top: 20px;">确定</button>
	</view>
</template>

<script lang="ts">
import { MyUserModel } from '../../api/user';
	export default {
		name:"test_a",
		data() {
			return {
			};
		},
		props: {
			userData: {
				type: MyUserModel,
				require: false
			}
		},
		methods: {
			save() {
				console.log(this.userData)
			}
		}
	}
</script>

<!-- 父组件 -->
<template>
	<view class="container">
		<test_a :user-data="userData"></test_a>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {
					name: 'zhangsan',
					age: 18
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

第二种：通过url跳转携带（父传子）

适用于传递对象是要跳转的页面

<!-- 跳转页面 -->
<template>
	<view>
		<uni-easyinput v-model="userData.name" placeholder="请输入姓名"></uni-easyinput>
		<uni-easyinput v-model="userData.age" placeholder="请输入年龄"></uni-easyinput>
		<button @click="save" type="primary" style="margin-top: 20px;">确定</button>
	</view>
</template>

<script lang="ts">
import { MyUserModel } from '../../api/user';
	export default {
		data() {
			return {
				userData: {type: MyUserModel, default: {}}
			};
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.userData))
			Object.assign(this.userData, data)
			console.log('onload: ', this.userData)
		},
        methods: {
			save() {
				console.log(this.userData)
			}
		}
	}
</script>

<!-- 父页面 -->
<template>
	<view class="container">
		<!-- <test_a :user-data="userData"></test_a> -->
		<button @click="changePage">跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {
					name: 'zhangsan',
					age: 18
				}
			}
		},
		methods: {
			changePage() {
				uni.navigateTo({
					url: '/pages/page_a/page_a?userData=' + encodeURIComponent(JSON.stringify(this.userData))
				})
			}
		}
	}
</script>

第三种：refs访问（子传父）

适用于子组件

相比于第一种方法子组件不变，父组件调整

<!-- 子组件 -->
<template>
	<view>
		<uni-easyinput v-model="userData.name" placeholder="请输入姓名"></uni-easyinput>
		<uni-easyinput v-model="userData.age" placeholder="请输入年龄"></uni-easyinput>
		<button @click="save" type="primary" style="margin-top: 20px;">确定</button>
	</view>
</template>

<script lang="ts">
import { MyUserModel } from '../../api/user';
	export default {
		name:"test_a",
		data() {
			return {
				userForm: this.userData
			};
		},
		props: {
			userData: {
				type: MyUserModel,
				require: false
			}
		},
		methods: {
			save() {
				console.log(this.userData)
			}
		}
	}
</script>

<!-- 父页面 -->
<template>
	<view class="container">
		<test_a ref="childRef" :user-data="userData"></test_a>
		<button @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {
					name: 'zhangsan',
					age: 18
				},
				childData: {}
			}
		},
		methods: {
			submit() {
				// 访问子组件属性并拷贝
				Object.assign(this.childData, this.$refs.childRef.userForm)
				console.log('submit: ', this.childData)
			}
		}
	}
</script>

第四种：$emit触发事件（子传父）

组件使用更方便，如果是uni.navigateTo跳转，需要找到合适的位置监听

<!-- 跳转页面 -->
<template>
	<view>
		<uni-easyinput v-model="userData.name" placeholder="请输入姓名"></uni-easyinput>
		<uni-easyinput v-model="userData.age" placeholder="请输入年龄"></uni-easyinput>
		<button @click="save" type="primary" style="margin-top: 20px;">确定</button>
	</view>
</template>

<script lang="ts">
import { MyUserModel } from '../../api/user';
	export default {
		data() {
			return {
				userData: {type: MyUserModel, default: {}}
			};
		},
		methods: {
			save() {
				console.log(this.userData)
				// 给父组件传值
				this.$emit('save', this.userData)
			}
		}
	}
</script>

<!-- 父页面 -->
<template>
	<view class="container">
		<page_a @save= 'getUserData'></page_a>
	</view>
</template>

<script lang="ts">
import page_a from '../page_a/page_a.vue'

	export default {
		components: {
			page_a
		},
		data() {
			return {
				childData: {}
			}
		},
		methods: {
			getUserData(childUserData) {
				console.log('getUserData: ', childUserData);
				this.childData = childUserData
			}
		}
	}
</script>

第五种：$on接收数据（兄弟传递）

注意：此处的发送信号和接收，是用的 uni.$emit 和 uni.$on

<!-- 页面 page_a.vue -->
<template>
	<view>
		<uni-easyinput v-model="userData.name" placeholder="请输入姓名"></uni-easyinput>
		<uni-easyinput v-model="userData.age" placeholder="请输入年龄"></uni-easyinput>
		<button @click="save" type="primary" style="margin-top: 20px;">确定</button>
	</view>
</template>

<script lang="ts">
import { MyUserModel } from '../../api/user';
	export default {
		data() {
			return {
				userData: {type: MyUserModel, default: {}}
			};
		},
		methods: {
			save() {
				console.log(this.userData)
				uni.$emit('save', this.userData)
			}
		}
	}
</script>

<!-- 页面paga_b.vue -->
<template>
	<view>
		
	</view>
</template>

<script lang="ts">
	export default {
		data() {
			return {
				b_userData: {}
			};
		},
		created() {
			uni.$on('save', userData => {
				console.log('b_userData: ', userData)
				this.b_userData = userData
			})
		}
	}
</script>

<!-- 父页面 -->
<template>
	<view class="container">
		<page_a></page_a>
		<page_b></page_b>
	</view>
</template>

<script lang="ts">
import page_a from '../page_a/page_a.vue'
import page_b from '../page_b/page_b.vue';

	export default {
		components: {
			page_a,
			page_b
		},
		data() {
			return {
			}
		}
	}
</script>