element-ui中的el-dialog组件经常用作嵌套表单来使用，但是当我们把它封装成一个子组件时会发现点击隐藏与显示会出现问题。以下贴出关键代码，希望对大家有帮助，共同学习。
解决代码：
el-dialog子组件：
<template>
<div class="dialog">
<el-dialog
title="发布文章"
:visible.sync="dialogFormVisible"
@close="closeDialog"
>
<!-- 表单 -->
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
>
<el-form-item label="文章封面：" prop="file">
<!-- 文章封面图片上传开始 -->
<el-upload
ref="uploadxls"
action="/blog-console/blog"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:headers="headersObj"
:auto-upload="false"
:before-upload="beforeupload"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
<!-- 文章封面图片上传结束 -->
</el-form-item>
<!-- 摘要 -->
<el-form-item
label="文章摘要："
prop="description"
style="margin-top: 5px"
>
<el-input type="textarea" v-model="ruleForm.description"></el-input>
</el-form-item>
<el-form-item label="发布形式：" prop="status" style="margin-top: 10px;">
<el-radio-group v-model="ruleForm.status">
<el-radio :label="1">公开</el-radio>
<el-radio :label="3">私密</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
el-dialog所在的父组件：
根据以上代码就可以实现el-dialog作为子组件正常的显示与隐藏了。
