前言
最近在做的一个小程序项目中,有一个身份切换的功能,点击切换按钮时,子组件向父组件传递身份信息,父页面依据这个身份信息对页面进行显示与隐藏。
具体实现
子组件中定义一个点击事件,在这里是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>
结果截图:
完结撒花