el-dialog父子组件传值问题

最新推荐文章于 2023-09-06 17:02:11 发布

原创最新推荐文章于 2023-09-06 17:02:11 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Element-UI的el-dialog组件创建一个登录弹窗，并在登录成功后通过父子组件通信关闭弹窗。通过实例展示了如何设置dialog的同步状态和处理登录后的回调操作。

使用element -UI的el-dialog去做一个登陆弹窗的组件，需求是在登录完成后关闭弹窗

父组件代码

<template>
	<div v-if="isLogin==false" class="login-btn" @click="toLogin">登录</div>
	<Login :visible="dialogVisible" @close="closeDialog"></Login>
</template>
<script>
	 export default {
        name: "Mall",
        data() {
        	return {
        		dialogVisible: {flag:false},
        	}
        },
        methods: {
        	toLogin(){
                this.dialogVisible.flag = true;
            },
        	closeDialog(){
                this.dialogVisible.flag = false
            }
        }
     }
</script>

子组件代码

<template>
    <el-dialog :visible.sync='visible.flag' width="30%" :close-on-click-modal="false">
        <div class="login-warp">
            ...
        </div>
    </el-dialog>
</template>
<script>
    export default {
        name: "LoginDialog",
        props: ['visible'],
        methods:{
        	handleLogin() {
        		this.$store.dispatch("Login",this.loginForm).then(() => {
        				//当登录成功之后，调用父组件的close方法，改变dialogVisible对象的值
                            this.$emit('close')
                        }).catch(() => {
                            this.loading = false;
                            if (this.captchaOnOff) {
                                this.getCode();
                            }
                        });
        	}
        }
<script>