如何使用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
版权声明：本文为博主原创文章，转载请附上博文链接！

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

vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
从零开始徒手撸一个vue的toast弹窗组件
相信普通的vue组件大家都会写,定义 -> 引入 -> 注册 -> 使用,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢? 首先,我们来分析一下弹窗组件的特性(需求): ...
vue离开页面弹窗提示
vue离开提示弹窗分类一:关闭页签.网页或刷新 mounted() {window.addEventListener("beforeunload", this.beforeUnl ...
found 84 vulnerabilities (65 low, 7 moderate, 11 high, 1 critical) vue使用时提示有漏洞
found 84 vulnerabilities (65 low, 7 moderate, 11 high, 1 critical)run `npm audit fix` to fix them, o ...
Extjs中给同一个GridPanel中的事件添加参数的方法
Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({ text:'启用', sco ...
laravel-admin使添加、编辑按钮支持附带参数
本篇博客教大家如何通过修改laravel-admin源码,使添加.编辑按钮支持附带参数,从而支持我们一些特殊业务.(对于高级版本的laravel-admin编辑方法不支持) 一.自定义添加方法我们修 ...
【独立版】智慧城市同城V4_2.1.4全开源全插件VUE版，修复房产信息组件后台资料编辑中会显示其他平台小区的问题
源码介绍 [独立版]智慧城市同城V4_2.1.4全开源全插件VUE版,修复房产信息组件后台资料编辑中会显示其他平台小区的问题!智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信息. ...
vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...
vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现
前言最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...

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

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

最新文章

热门文章