在一个方法里调用新增和编辑接口

当我们编辑和新增用同一个弹框的时候,新增接口和编辑接口都是点击确定按钮
这个时候我们往往需要有一个判断条件去区分到底调用哪一个接口
这个条件就是通过vue调试工具,我们看看编辑的时候回显的数据和新增的数据的不同(往往是新增无id,编辑会回显,有id)
在这里插入图片描述
在这里插入图片描述
可以看出新增无id,编辑有id

方法一,父给子组件通信

获取回显数据的时机:是在打开弹框(注意:新增和编辑都会打开弹框
在这里插入图片描述

如果是父子组件的,还要注意一个bug,因为我们回显的接口参数是父组件传来的值,,而且每次都是打开弹框获得回显数据,并且把这个返回值给了自己声明的这个data变量,,一直都会有id,那么我们就进不去新增的这个执行语句了
在这里插入图片描述
解决办法让data变量清空
就是我们需要在关闭弹框时,把父组件的这个数据给他清空,才能让自己的这个data变量回到初始内容,才不会影响我们的判断
在这里插入图片描述
在这里插入图片描述

方法二 ,ref调用子组件的方法

另外一个解决办法:
发送回显数据的时机,我们在点击编辑的时候才会回显数据(不会造成data变量一直有id的情况

  1. 就是在子组件里在获取详情的时候(回显)封装一个方法,记得传形参
  2. 在父组件里通过ref给组件绑定,在父组件中直接调用子组件的方法
    在这里插入图片描述
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值