element-ui中点击按钮，弹出对话框，并使用父子组件传参的形式关闭对话框

今天的需求是，使用element-ui插件编写页面，点击按钮，弹出对话框，并使用父子组件传参的形式关闭对话框。

一、点击按钮，出现对话框

描述三个按钮：

<el-row class="padding-10-0">
        <el-button size="small" @click="showDialog()">组合工程</el-button>
        <el-button size="small" @click="showDialog()">科目匹配</el-button>
        <el-button size="small" @click="computedHandle">计算指标</el-button>
</el-row>

其中combineEngineering和subjectMatch是我要展示页面的组件名称，传入showDialog方法里面，控制不同页面，后面有介绍。
这个因需求而异

在控件里面描述属性

<el-dialog :modal="true" 
   :fullscreen="fullscreen" 
   custom-class="dialog-custom" 
   :visible.sync="dialogVisible" 
   width="50%">

使用 原有属性 :visible.sync 定义页面的显示属性为dialogVisible。

并且在在data的return里面声明一下

之后点击按钮，触发showDialog事件，设置dialogVisible 数值为 true，控制弹窗显示：

// 显示弹窗
      showDialog() {
        this.dialogVisible = true;
      },

二、对话框显示不同的页面

在data的return里面有：

dialogVisible在第一个标题有写到；

添加dialogCategory，标记不同的页面。

在显示弹窗的方法里面加入这个页面的标记，方法变成如下：

// 显示弹窗 
showDialog(dialogCategory = '') {
    this.dialogVisible = true; 
    this.dialogCategory = dialogCategory; //重点在这个
 },

在调用方法的按钮上面，改变为：

 <el-row class="padding-10-0">
        <el-button size="small" @click="showDialog('combineEngineering')">组合工程</el-button>
        <el-button size="small" @click="showDialog('subjectMatch')">科目匹配</el-button>
        <el-button size="small" @click="computedHandle">计算指标</el-button>
      </el-row>

这样子就可以点击按钮的时候，直接确定要出现的页面。

使用import将指定页面引入到这个页面中。

  import combineEngineering from './combine-engineering/combine-engineering';
  import subjectMatch from './subject-match/subject-match';

之后重点来了，这里引入相应的页面，比如可以看到我的组合工程页面是：
combine-engineering

 <el-dialog
      :modal="true"
      :fullscreen="fullscreen"
      custom-class="dialog-custom"
      :visible.sync="dialogVisible"
      width="50%">
      <template v-if="dialogCategory === 'combineEngineering'">
        <div slot="title">组合工程 <i @click="fullscreen = !fullscreen" class="el-icon-menu float_right" style="padding-right: 30px;cursor: pointer;"></i></div>
        <combine-engineering></combine-engineering>
      </template>
      <template v-else-if="dialogCategory === 'subjectMatch'">
        <div slot="title">科目匹配 <i @click="fullscreen = !fullscreen" class="el-icon-menu float_right" style="padding-right: 30px;cursor: pointer;"></i></div>
        <subject-match></subject-match>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

后面的取消和确定按钮，本来是想放在父页面中，在子页面通过传参的方式控制，最后由于弹出框的功能不统一，每个页面细分自己的，比较合理，于是取消这个写法。

在相应的页面中，一定要有name指定，比如在subject-match页面的js里面一定要有：name: ‘subject-match’,

 

这个时候就可以点击按钮，显示不同的页面了。

 

三、对话框的页面设计

 

这个可以参考另一篇文章，这里不做过多描述

https://blog.csdn.net/weixin_42636552/article/details/89157005

 

四、使用父子组件传参的形式关闭对话框

这是一个知识点，可以先点击这个链接了解一下父组件和子组件传参的不同

https://www.cnblogs.com/hao-1234-1234/p/10157063.html

关闭对话框，个人认为，在父组件里面设置控制对话框关闭的属性，并写好方法，在子组件里面传递参数，调用父组件方法，这样子更体现VUE框架的数据驱动特性，干净利落。

4.1 父组件写好方法

 // 关闭弹窗
      hideDialog() {
        this.dialogVisible = false;
      },

直接改变dialogVisible的值,驱动对话框子组件关闭。

 

4.2 父组件调用关闭方法

 

直接使用@+方法名来引用方法

 

4.3 子组件使用 $emit 调用父组件方法

在子组件里面写方法，使用 this.$emit(‘hideDialog’); 调用父组件的hideDialog方法

 // 关闭弹窗
      closeDialog() {
        this.$emit('hideDialog');
      }

这样子就可以在子组件里面使用到父组件的方法。

4.4 子组件需要时调用

 <el-row class="margin-top-10 text-align-right">
      <el-button type="primary" @click="closeDialog()">应用修改</el-button>
      <el-button @click="closeDialog()">取 消</el-button>
    </el-row>

直接@click就可以了。
这个时候，使用父子组件传参的形式关闭对话框的功能就实现了。

---

有一个关于父子组件传参的优化方案，可以看看这个

https://blog.csdn.net/weixin_42636552/article/details/89250428

 

五、放上我的全部代码，仅供参考

index . vue 【父组件】

<template>
  <el-container class="adjust height-inherit background-white">
    <el-header class="border-bottom">
      <el-row class="padding-10-0">
        <el-button size="small" @click="showDialog('combineEngineering')">组合工程</el-button>
        <el-button size="small" @click="showDialog('subjectMatch')">科目匹配</el-button>
        <el-button size="small" @click="computedHandle">计算指标</el-button>
      </el-row>
    </el-header>
    <el-dialog
      :modal="true"
      :fullscreen="fullscreen"
      custom-class="dialog-custom"
      :visible.sync="dialogVisible"
      width="50%">
      <template v-if="dialogCategory === 'combineEngineering'">
        <div slot="title">组合工程 <i @click="fullscreen = !fullscreen" class="el-icon-menu float_right" style="padding-right: 30px;cursor: pointer;"></i></div>
        <combine-engineering @hideDialog="hideDialog"></combine-engineering>
      </template>
      <template v-else-if="dialogCategory === 'subjectMatch'">
        <div slot="title">科目匹配 <i @click="fullscreen = !fullscreen" class="el-icon-menu float_right" style="padding-right: 30px;cursor: pointer;"></i></div>
        <subject-match @hideDialog="hideDialog"></subject-match>
      </template>
      <!--<span slot="footer" class="dialog-footer">-->
        <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      <!--</span>-->
    </el-dialog>
  </el-container>
</template>
<script>
  import combineEngineering from './combine-engineering/combine-engineering';
  import subjectMatch from './subject-match/subject-match';

  export default {
    name: 'adjust',
    components: {
      combineEngineering,
      subjectMatch
    },
    data() {
      return {
        dialogVisible: false,
        fullscreen: false,   // 弹窗是否全屏
        dialogCategory: ''，
        data: []
        }
    },
      // 显示弹窗
      showDialog(dialogCategory = '') {
        this.dialogVisible = true;
        this.dialogCategory = dialogCategory;
      },

      // 关闭弹窗
      hideDialog() {
        this.dialogVisible = false;
      }
    }
  };
</script>


<style lang="less">
  .adjust {
    width: 100%;
    .pointer {
      color: #169BD5;
    }
  }

  .el-tabs__nav-wrap:after {
    background: #FFFFFF !important;
  }

  /*弹窗*/
  .dialog-custom {
    .el-dialog__header {
      background-color: #409eff;
      color: #ffffff;
    }
    .el-icon-close {
      color: #ffffff;
      &:hover {
        color: #ffffff;
        opacity: 0.6;
      }
    }
  }

  /*设置计算加载图标字体大小*/
  .computed {
    .el-icon-loading {
      font-size: 32px;
    }
  }

</style>

subject-match . vue 【子组件】

<template>
  <div class="subject-match height-inherit" id="subject-match">
    <el-row :gutter="50">
      <el-col :span="5">
      
      </el-col>
      <el-col :span="19">
      
      </el-col>
    </el-row>
    <el-row class="margin-top-10 text-align-right">
      <el-button type="primary" @click="closeDialog()">应用修改</el-button>
      <el-button @click="closeDialog()">取 消</el-button>
    </el-row>
  </div>
</template>

<script>
  import {subjectMatch} from 'service/budget/adjust';

  export default {
    name: 'subject-match',
    data() {
      return {
        loading: false,
        maxHeight: 'auto',
        tableData: [],
        data: []
      }
    },
    watch: {
      nodeId: {
        handler(newVal, oldVal) {
          if (newVal && newVal !== oldVal) {
            this.getList();
          }
        },
        deep: true
      }
    },
    mounted() {
      let projectDom = document.getElementById('subject-match');
      let height = projectDom.clientHeight || projectDom.scrollHeight;
      this.maxHeight = height - 20;
      this.getList();
    },
    methods: {
      // 关闭弹窗
      closeDialog() {
        this.$emit('hideDialog');
      }
    }
  }
</script>

<style lang="less">

</style>

 

---

THE END

good lunck to you