子组件弹框关不了怎么办

老铁们可以帮我看看问题出在哪了吗，点了关闭键之后弹框关不了又弹出来了

 父组件

<template>
	<div class="nav-bar">
		城市影院
		<span class="iconfont icon-gengduo icon-5" 
		@click="showDialog">
			<my-dialog
				:showDialog="isShowDialog"
				@closeDialog="isShowDialog=false" >
			</my-dialog>
		</span>
	</div>
</template>

<script>
	import MyDialog from "./mdialog.vue";
	export default{
			data(){
				return{
					isShowDialog: false
				}
			},
			components:{
			MyDialog:MyDialog
			},
			methods: {
			   showDialog: function(){
			   			this.isShowDialog = true;
			   		}
			  },
		}	
</script>

<style lang="scss" scoped>
	.nav-bar {
		background-color: var(--primaryColor);
		height: 45px;
		color: white;
		font-weight: bold;
		font-size: 18px;
		/* 弹性盒子 */
		display: flex;
		/* 主轴（水平）居中 */
		justify-content: center;
		/* 副轴（垂直）居中 */
		align-items: center;
		position: relative;
	}
	
	.nav-bar .icon-nav-right-menu{
		position: absolute;
		right: 10px;
		font-size: 22px;
		font-weight: lighter;
	}
	.icon-5{
		position: absolute;
		right: 10px;
		top: 15px;
	}
</style>

子组件

<template>
<transition name="dialog">
	<div 
		v-if="showDialog"
		id="dialog-bg"
		@touchmove.prevent 
		@scroll.prevent >
		<div id="dialog" >
			<button
				class="dialog-button">
				 登录账号</button>
				 <hr>
			<button 
				class="dialog-button"
				@click="close" >取消</button>
		</div>
	</div>
</transition>
</template>

<script>
	
	export default{
		props:{
			showDialog: Boolean,
			title: String,
			message: String
		},
		
		methods: {
			close: function(){
				this.$emit("closeDialog");
			}
		},
		
		watch:{
			
		}
		
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}
	
	#dialog-bg{
		top: 0;
		left: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 98;
	}
	
	#dialog{
		border-radius: 20px 20px 0 0;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		width: 100vw;
		padding: 10px;
		padding-bottom: 15px;
	}
	
	/* 适配电脑等大屏幕 */
	@media (min-width: 750px) {
		#dialog{
			width: 500px;
			left:0;
			right:0;
			margin:0 auto;
		}
	}
	
	.dialog-button{
		width: 100%;
		background-color: white;
		border-width: 0;
		padding: 10px;
		outline: none;
		color: black;
		font-size: 15px;
	}
	
	.dialog-button:focus {
		outline: none;
	}
	
	.dialog-button:active{
		background-color: #585dbe;
		border-color: #585dbe;
	}
	
	
	.dialog-enter-active, .dialog-leave-active {
	  transition: all .5s;
	}
	
	.dialog-enter, .dialog-leave-to {
	  opacity: 0;
	  transform: translateY(300px);
	}
	
	
</style>

页面

<template>
	<div class="full-page">
		<nav-bar></nav-bar>
		<div class="content-box">
			<div class="Cinema-box">
				<div class="">
					城市影院影厅一
				</div>
				<div class="">
					武汉华夏学院多功能报告厅一号厅
				</div>
			</div>
			<hr>
		</div>
		
		<tabBar></tabBar>
	</div>
</template>

<script>
	import NavBar from "../components/NavBar.vue";
	import TabBar from "../components/TabBar.vue";
	
	export default{
		data(){
			return{
				
			}
		},
		components:{
		NavBar:NavBar,
		TabBar:TabBar,
		
		},
		methods: {
		  
		  },
	}
	
	
</script>

<style>
	.full-page{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.content-box {
		/* 占满弹性盒子剩下的空间 */
		flex: 1;
		/* 溢出处理 */
		overflow: auto;
	}

</style>