父组件点击控制子组件组件显隐

博客涉及Vue.js和小程序相关内容,Vue.js是前端开发常用框架,小程序是轻量级应用。JavaScript作为基础编程语言,在两者开发中发挥重要作用,助力实现丰富功能与良好用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//父组件
<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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呱嗨喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值