Vue+elementUI弹出框的使用（demo代码详细分析）

迈不过友情╰ 2023-10-05 06:56 8阅读 0赞

> 【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！  
>   
> 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!  
>   
> 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中…

Vue+elementUI表格组件使用请参考：[Vue+elementUI表格组件使用][Vue_elementUI]

--------------------

本篇是Vue+elementUI的弹框使用案例前端代码解析

因为开始写Vue项目很容易遇到弹出异常弹出，前期老是有的弹出无法正常关闭。

后来了解后就是一个Vue中子传父，父传子的问题

![在这里插入图片描述][20200917203543432.png_pic_center]

首先了解弹出框的显示 :visible.sync这个

![在这里插入图片描述][20200916210659304.png_pic_center]

在主页面导入相关要弹出的弹窗，并绑定相关的值和方法(根据自己的需要)

主页面一定要导入这些弹框组件 检查清楚，然后将弹出状态设置为false  
![在这里插入图片描述][20200916210711228.png_pic_center]

方法当我们点击相关按钮的时候我们要将弹出框的显示状态设置为true，这样弹出框即可弹出

![在这里插入图片描述][20200917204205479.png_pic_center]

1.如添加按钮 弹出框设置为true

2.如编辑按钮要将这一行要编辑的数据带出

所以要 this.editForm = Object.assign(\{\}, row); 将这一行的数据赋值给某一个对象,其实row本身就代表这一行的对象参考如下3

3.移除按钮 要传某一个code 所以将这一行对象的code赋值给绑定在这个弹框上的数据 等等…

row.sSysCode就代表当前行对象的某一个属性，你要什么属性就自己点出来

![在这里插入图片描述][20200916210708573.png_pic_center]

父传子，用props组件接受 如下接受来自父组件的dialogFormVisibleAdd参数，如上我们点击添加按钮后将这个参数设置为了true，所以弹框父组件传来true弹框动态绑定，显示为true 弹框打开  
![在这里插入图片描述][20200916210717836.png_pic_center]  
子传父this.$emit(‘addDialogClose’);  
![在这里插入图片描述][20200916210723264.png_pic_center]

父组件上面绑定了这个方法 就会自动调用执行这个方法 首先添加了页面会自动刷新一下最新的列表 然后将弹出框的状态设置为关闭 这样一个完整的流程就做好了

<system-add :dialogFormVisibleAdd="dialogFormVisibleAdd" :addForm="addForm" @addDialogClose="addDialogClose" @refresh="refresh"></system-add>

![在这里插入图片描述][20200916210720396.png_pic_center]

//自己定义的一个刷新页面的方法
        refresh() {
        
                this.getSystemList();
            }

像增删改这样的操作页面是肯定要实现同步刷新的，简单的做一个调用方法即可实现。

总结：关于Vue+elementUI项目弹出框就是组件的使用，引用组件就是父传子，子传父等问题，好好练习和反思大家一起进步！

--------------------

`The best investment is to invest in yourself.`

![在这里插入图片描述][20200504104023371.jpg]

2020.09.17 愿你们奔赴在自己的热爱里！

[Vue_elementUI]: https://blog.csdn.net/weixin_45393094/article/details/108546361
[20200917203543432.png_pic_center]: https://img-blog.csdnimg.cn/20200917203543432.png#pic_center
[20200916210659304.png_pic_center]: https://img-blog.csdnimg.cn/20200916210659304.png#pic_center
[20200916210711228.png_pic_center]: https://img-blog.csdnimg.cn/20200916210711228.png#pic_center
[20200917204205479.png_pic_center]: https://img-blog.csdnimg.cn/20200917204205479.png#pic_center
[20200916210708573.png_pic_center]: https://img-blog.csdnimg.cn/20200916210708573.png#pic_center
[20200916210717836.png_pic_center]: https://img-blog.csdnimg.cn/20200916210717836.png#pic_center
[20200916210723264.png_pic_center]: https://img-blog.csdnimg.cn/20200916210723264.png#pic_center
[20200916210720396.png_pic_center]: https://img-blog.csdnimg.cn/20200916210720396.png#pic_center
[20200504104023371.jpg]: https://img-blog.csdnimg.cn/20200504104023371.jpg