Vue 组件 el-dialog 的取消按钮的可视参数回显

问题描述， 使用 el-dialog 对话框是有个取消按钮，想实现取消按钮和关闭按钮一样的效果；结果关闭之后父组件拿就再打不开了；原因是 emit 和 sync 语法没掌握；

//子组件
<el-dialog
        title="充值"
        :visible.sync="isShow"
        width="30%"
        :destroy-on-close="isclose"
        @update:visible="val => $emit('update:visible', val)"
        :close-on-press-escape="false"
        custom-class="recharge"
    >
        <el-form ref="form"  :model="form" label-width="80px">
        
           
            <el-form-item label="" >
                    <el-input v-model="form.pageDetail" placeholder="请输入充值金额" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item class="button">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit">确认充值</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>

cancel(){
		//方法一：获取对话框的关闭按钮，然后触发其点击事件
            // let div = document.getElementsByClassName("recharge")[0];
            // let button = div.getElementsByTagName("button")[0];
            // button.click()
        //方法二：将对话框是否可见的这个变量的值 回显给父组件
            this.isShow = false;
            this.$emit('update:visible', this.isShow)
        }

//父组件调用子组件模块
		<recharge-component
            :visible.sync= "isshowRecharge"
            ref= "recharge">
        </recharge-component>

参考资料：深入理解.sync修饰符