vue子组件通过$parent操作父组件的参数

 父组件

<template>
	<div class="body-bg">
		<nav-box-mask :navBoxMaskIsShow="navBoxMaskIsShow" />
	</div>
</template>

<script>
import NavBoxMask from "@/components/NavBoxMask";
export default{
	data(){
		navBoxMaskIsShow: true
	},
	components: {
		"nav-box-mask": NavBoxMask
	}
}
</script>

子组件

<template>
	<div v-show="navBoxMaskIsShow" class="nav-box-mask" @click="navBoxMaskHideClick" >
		<div class="box">
			<div class="item" v-for="item in navList" :key="item.id" >
				<div class="iconfont-box">
					<span class="iconfont item-iconfont" v-html="item.iconfont"></span>
				</div>
				<div class="title">{{item.title}}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'NavBoxMask',
	props: ["navBoxMaskIsShow"],
	data(){
		return {
			navList: [
				{id: 1,iconfont: '&#xe660;',title: 'Blog'},
				{id: 2,iconfont: '&#xe656;',title: 'Music'},
				{id: 3,iconfont: '&#xe636;',title: 'Dome'},
				{id: 4,iconfont: '&#xe62f;',title: 'Me'}
			]
		};
	},
	methods: {
		navBoxMaskHideClick: function(){
			this.$parent.navBoxMaskIsShow = false;
		}
	}
}

</script>

<style scoped="scoped" >
.nav-box-mask{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color:rgba(0,0,0,0.2);
}
.nav-box-mask .box{
	display: flex;
	flex-wrap: wrap;
	width: 215px;
	height: 215px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -107px;
	margin-left: -107px;
}
.item{
	width: 100px;
	height: 100px;
	margin-left: 5px;
	border: 1px solid #74B559;
	color: #93C87B;
}
.item .iconfont-box{
	width: 28px;
	height: 28px;
	margin: 15px auto;
}
.item .item-iconfont{
	font-size: 26px;
	margin: 10px auto;
}
.item .title{
	width: 100px;
	font-size: 18px;
	text-align: center;
}
</style>