uni-app学习笔记之页面通讯

//index.vue
<template>
	<view class="content">
		<image class="logo" :src="path"></image>
		<button type="default" @click="goToChangeAvatar">ChangeAvatar</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: '/static/logo.png'
			}
		},
		onLoad() {
			uni.$on("changeAvatar", (e) => {
				this.path = e.path
			})
		},
		onUnload() {
			uni.$off("changeAvatar", () => {})
		},
		methods: {
			goToChangeAvatar() {
				uni.navigateTo({
					url: "../changeAvatar/changeAvatar"
				})
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>

//修改头像页面
<template>
	<view>
		<button type="default" @click="changeAvatar">更改头像</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			changeAvatar(){
				uni.chooseImage({
					count:1,
					success: (e) => {
						uni.$emit("changeAvatar",{path:e.tempFilePaths[0]})
					}
				})
			}
		}
	}
</script> 

总结:
index.vue完成全局自定义事件的监听和销毁,uni.$on(),uni.$off()
changeAvatar.vue触发自定义事件,uni.$emint()

uni.$on(),uni.$once(),
uni.$off()
uni.$emint()

以上4个API常用于跨页面\跨组件通讯,以上触发的事件都是全局级别的,
注意及时销毁事件监听.

		onLoad() {
			uni.$on("changeAvatar", (e) => {
				this.path = e.path
			})
		},
		onUnload() {
			uni.$off("changeAvatar", () => {})
		},

		uni.$emit("changeAvatar",{path:e.tempFilePaths[0]})