[JavaScript知识库]父组件点击控制子组件组件显隐

//父组件
<logo :isShow="isShow" @handleOk="handleOk"></logo>
import logo from '../../components/logo.vue'
components: {
			logo
		},
data() {
			return {
				isShow: false,
}
},
//判断用户是否登录
onShow() {
			console.log(112)
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo !== 'undefined' && userInfo !== '') {
				return userInfo;
			} else {
				uni.showToast({
					title: "请先登录",
					icon: 'none'
				})
				this.isShow = true
			}
		},

methods: {
			
			handleOk: function(e) {
				// handleOk就是子组件传过来的值
				console.log(e)
				this.isShow = e;
			},
}

//子组件
<template>
	<view class="container" v-show="isShow">
		<view class="info-box">
			<view style="display: flex;align-items: center;justify-content: center;">
				<image class="avatar-img" :src="avatarUrl" />
			</view>
			<view style="width:200rpx; margin: 20rpx auto 0; display: flex;align-items: flex-start;justify-content: center;flex-direction: column;">
				<text>昵称： {{nickName}}</text>
				<text>性别： {{gender}}</text>
				<text>国家： {{country}}</text>
				<text>省份： {{province}}</text>
			</view>
		</view>
		<view style="margin-top:20%">
			<button open-type="getUserInfo" @click="showUserInfoTap">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: true
			}
		},
		name: 'logo',
		data() {
			return {
				nickName: "",
				avatarUrl: "",
				gender: "",
				province: "",
				city: "",
				country: "",
			}
		},
		computed: {},
		methods: {
			showUserInfoTap: function() {
				var that = this;
				// 微信用户登录获取用户信息
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						console.log(res)
						var userInfo = res.userInfo
						uni.setStorageSync('userInfo', userInfo);
						var nickName = userInfo.nickName
						var avatarUrl = userInfo.avatarUrl
						var gender = userInfo.gender //性别 0：未知、1：男、2：女
						var province = userInfo.province
						var city = userInfo.city
						var country = userInfo.country
						if (gender == 1) {
							gender = '男'
						} else if (gender == 2) {
							gender = '女'
						} else {
							gender = '未知'
						}
						uni.setStorageSync('userInfo', userInfo);
						that.nickName = nickName,
							that.avatarUrl = avatarUrl,
							that.gender = gender,
							that.country = country,
							that.province = province
						//获取用户code 将code传给后端
						uni.login({
							success: (res) => {
								console.log(res)
								this.$emit('handleOk', false)
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100vh;
		background-color: #FFF;
	}

	.info-box {
		padding: 32rpx;
	}

	.avatar-img {
		width: 100px;
		height: 100px;
		border: 1px solid gray;
	}

	.info-box>text {
		display: block;
		margin-left: 20%;
		margin-top: 4%;
	}
</style>