vue+element组件封装

欢迎来到萌小问题分享环节

大家好! 这是我第一次使用博客向大家分享我在项目中遇到的问题及最终解决方案,希望能对大家有所帮助.

问题开始

弹框问题：
1.由于管理平台里含有很多的弹框,每个界面几乎都有新增和编辑弹框,若是新增和编辑一直重复写会增加代码量,而且需要增加字段时,需要修改两处代码,这样就会增加任务量,对于这个问题,于是就想到了vue里的组件封装及使用,将弹框封装成组件,通过判断去使用,这样修改的时候只需要修改组件就可以了,接下来就说说封装的步骤吧.

组件创建

1.首先在你的项目里建一个.vue文件,如下图

在这个文件里构建你的弹框内容，如下图

使用的是element中的弹框，显示是用true/false，于是在脚本内定义它，默认不显示

这样一个组件都创建好了，接下来我们去使用它吧！

组件使用

1.在需要的界面去引用刚刚创建的组件

引入之后就开始使用吧！

由于它是一个弹框就需要定操作它的状态啦，默认让弹框不显示

业务需求

点新增出现弹框，先给新增绑定一个事件，去调用弹框，代码如下图


当点击新增让弹框的显示，所以是 this.DialogVisible = true，这样第一步的弹框组件封装及使用就可以了

结束

到这里就结束了，没明白的朋友们欢迎评论，有不对的地方大家也可以在评论区提出哦！第一次写，希望对大家有所帮助哦！接下来会更新组件之间的传值及组件之间的事件调取更新，敬请期待吧~