uniapp 父子组件通信，刷新子组件

一、目录列表

目录

 二、页面引用

1、父页面代码

父页面使用:showIcon向子页面传递参数，使用@callBack接收并处理子页面传递回来的数据

//html
<template>
	<view class="content">
		<set-up ref="setUp"></set-up>
		<show-modal :showIcon="showIcon" :showCancel="showCancel" :modalTitle="modalTitle"
			:modalContent="modalContent" @callBack="callBack">
		</show-modal>
	</view>
</template>

//JavaScript
<script>
	import setUp from './setUp.vue'
	export default {
		components: {
			recentEvents,
			setUp
		},
                data() {
			return {
				modalTitle: '',
				modalContent: '',
				showModal: false,
				modalType: '',
				showCancel: true,
				confirmText: '确认',
				showIcon: true,
			}
		},
	}
</script>

2、子页面代码

子页面使用props来接收父页面传递过来的参数，使用this.$emit("callBack", type)向父页面传递数据 //自定义弹窗样式

<template>
	<view class="content">
		<view class="modalBox">
			<view class="modal-mask" @click="callBack('hide')"></view>
			<view class="modal-contentAllBox">
				<view class="modal-contentBox">
					<view class="modal-title">
						<view class="title">{{modalTitle}}</view>
						<view class="hide" v-if="showIcon" @click="callBack('hide')">×</view>
					</view>
					<view class="modal-content">
						<view class="content">{{modalContent}}</view>
					</view>
					<view class="modal-btnbox">
						<view class="btn confirm" v-if="showConfirm" @click="callBack('confirm')">确定</view>
						<view class="btn cancel" v-if="showCancel" @click="callBack('cancel')">取消</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			modalTitle: { //标题
				type: String,
				default: ""
			},
			modalContent: { //内容
				type: String,
				default: ""
			},
			showIcon: { //关闭按钮
				type: Boolean,
				default: true
			},
			showConfirm: { //确定按钮显示
				type: Boolean,
				default: true
			},
			showCancel: { //取消按钮显示
				type: Boolean,
				default: true
			},
		},
		data() {
			return {

			}
		},
		methods: {
			callBack(type) {
				this.$emit("callBack", type)
			}
		}
	}
</script>

<style lang="scss">
	.modalBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;

		.modal-mask {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			background: rgba(0, 0, 0, 0.5);
		}

		.modal-contentAllBox {
			position: fixed;
			top: 25%;
			left: 5%;
			width: 90%;
			z-index: 101;
			background-color: #fff;
			border-radius: 15rpx;

			.modal-contentBox {
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.modal-title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.title {
						font-size: 30rpx;
					}

					.hide {
						font-size: 40rpx;
						font-weight: 600;
					}
				}

				.modal-content {
					width: 70%;
					text-align: center;
					font-size: 30rpx;
					margin: 50rpx auto;
				}

				.modal-btnbox {
					width: 96%;
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						width: 46%;
						margin: 0 2%;
						text-align: center;
						padding: 8rpx 0;
						border-radius: 8rpx;
					}

					.confirm {
						color: #fff;
						background-color: #007aff;
					}

					.cancel {
						color: #007aff;
						background-color: #f2f2f2;
					}
				}
			}
		}
	}
</style>

三、在父组件刷新子组件

父页面代码

onLoad() {
	this.$refs.setUp.refreshData();
},

 子页面代码，父页面调用refreshData方法，可达到重新刷新子组件数据的效果

refreshData() {
	this.getAddress()
},