uniapp中，子组件给父页面传值（父组件）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp中，子组件给父页面传值（父组件）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

最近在做的一个小程序项目中，有一个身份切换的功能，点击切换按钮时，子组件向父组件传递身份信息，父页面依据这个身份信息对页面进行显示与隐藏。

具体实现

子组件中定义一个点击事件,在这里是identitySwitching()方法

<template>
	<view class="user-info">
          <img class="IdentityTransition" src="../../static/images/order5.png" alt="身份切换 
           标签" @click="identitySwitching()">
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(["userInfo"]),
		data() {
			return {
				isShow: true,
			}
		},
		methods: {
			identitySwitching: function() {
				let that = this;
                //如果身份信息显示已注册，isShow切换false
				if (that.userInfo.creditHousekeeper === 2) {
					that.isShow = !that.isShow;
                    //为父页面传值  （父页面接收的方法名，要传递的值）
					this.$emit("getIsShow", that.isShow);
				} else {
                    //为父页面传值   （父页面接收的方法名，要传递的值）
					this.$emit("getIsShow", that.isShow);
				}
			},

		},
	}
</script>

父页面接收

<template>
         <userMessage @getIsShow="getData"></userMessage>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true
			}
		},
		methods: {
			getData: function(data) {
                console.log(data);
				let that = this;
				that.isShow = data;
			}
	}
</script>