【Vue】解决el-dialog作为子组件封装点击显示与隐藏问题

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作为子组件正常的显示与隐藏了。