element ui点击按钮弹出款_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