子组件点击了取消没有用

子组件弹框点了取消没用，迅速下去又弹上来了，无法关闭
主页面

<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>

父组件

<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>

你在取消按钮事件后加一个.stop阻止冒泡试一下

不知道你这个问题是否已经解决, 如果还没有解决的话:

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7650740
你也可以参考下这篇文章：父组件调用子组件的方法以及子组件调用父组件的方法
除此之外, 这篇博客: 微信小程序父组件调用子组件的方法中的 父组件调用子组件的方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
```
子组件:
<child id="child>
methods:{
	getF(){
		console.log('我是子组件中的方法')
	}
}
```
```
父组件:通过this.selectComponent(id) 获取子组件
this.selectComponent('#child').getF();
```
您还可以看一下黄菊华老师的基于网页在线图书小说电子书阅读系统毕业设计毕设源码使用教程课程中的 -电子书阅读系统-系统发布演示小节, 巩固相关知识点

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^