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

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

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

描述三个按钮：

        组合工程
        科目匹配
        计算指标

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

在控件里面描述属性

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

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

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

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

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

在data的return里面有：

dialogVisible在第一个标题有写到；

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

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

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

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

 
        组合工程
        科目匹配
        计算指标
      

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

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

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

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

 
      
      
      
        取 消
        确 定
      
    

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

在相应的页面中，一定要有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 子组件需要时调用

 
      应用修改
      取 消
    

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

---

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

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

 

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

index . vue 【父组件】

subject-match . vue 【子组件】

 

---

THE END

good lunck to you