如何使用vue使同一个弹窗同时能实现添加和编辑

怎么样安装node环境和构建vue项目这里我就不详细说明了。在node和vue的官方文档里都能找得到

首先看一下我这个demo是什么样的

在这个demo里面，新增和编辑这两个按钮使用的是同一个弹窗

首先，这里有两个问题

第一：编辑所在的这个组件和新增所在的这个组件这是两个子组件，怎么让编辑和新增同时使用一个弹窗

第二：点击弹窗的确定按钮的时候怎么判断是新增的还是编辑的

咱们先来解决第一个问题，两个子组件怎么使用同一个弹窗，这就需要子组件互相传值了，通过使用bus来把新增的这个弹出弹窗的方法传给编辑，首先在父组件的data里面需要new一个vue实例，代码如下：

然后分别给两个子组件绑定这个bus，这是两个子组件

还要再两个子组件分别同props存放bus

            

在新增的那个组件里面

通过$on绑定，把show这个方法绑定起来，然后再编辑的那个组件里面这样写

Edit是编辑按钮点击事件所触发的方法，这样你就把一个show的方法通过bus实现子组件之间传递

解决了第一个问题，接着来解决第二个问题，第二个问题是如何判断弹窗里的确定按钮是新增还是编辑，这里面比较复杂，因为

这是两个子组件，所以当你点击编辑的时候你得先把这个列表里的内容放到弹窗的那个表格里，因为你点编辑的时候只是调用了

一下人家的那个方法而已，里面并没有数据，所以还是通过bus把列表的内容传给弹窗，这样判断是编辑还是新增容易了，你只需要判断一下有没有id就好了，编辑的时候肯定是有id的，新增的时候肯定是没有id的，代码如下

打码的地方写你的接口就好了，这就是实现新增和编辑同用一个弹窗的过程
--------------------- 
作者：buzhidaoqoshaming 
来源：CSDN 
原文：https://blog.csdn.net/buzhidaoqoshaming/article/details/80228924 
版权声明：本文为博主原创文章，转载请附上博文链接！