vue 方法获取返回值_vue组件回调返回值,让你的代码更为简洁

缘由

最近写公司业务代码的时候遇到这样一个需求,我写这块部分需要新增加一个弹窗,进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的$confirm方式可以自定义html部分的。但是我的内容其实非常少。

如果用传统的直接写弹窗的二次确认方式

缺点1:业务代码会变得很多

缺点2:我本身是在别人已经做完的基础上新增一个接口拦截,参数是传递给另一个函数。可以使用弹窗组件就需要定义取消和关闭函数,我必须把原本组装好的数据丢给全局。然后在确定之后,从全局再拿回来丢回去。

如果我的组件封装可以像$confirm的回调函数方式或者primose方式一样,那么参数就不存在丢来丢去,函数也可以少写点。代码能少写一半。

本身其实在以前是写过类似的封装的,那会是写小程序的时候。但是太久没有写,忘记了。心里不甘心,然后周六回过来试了试。成功了

涉及知识

1、数据的脏数据检测

2、回调函数

3、vue的数据传值方式

第一种:数据监听方式

这里使用elementUI的弹窗来简化下

一种数据监听的方式

1、弹窗部分代码

这是一段信息

取 消

确 定

export default {

data() {

return {

dialogVisible: false

};

},

methods: {

confirm() {

this.dialogVisib

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值