vue组件回调返回值,让你的代码更为简洁
2020/4/20 11:18:10
本文主要是介绍vue组件回调返回值,让你的代码更为简洁,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
缘由
最近写公司业务代码的时候遇到这样一个需求,我写这块部分需要新增加一个弹窗,进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的$confirm方式可以自定义html部分的。但是我的内容其实非常少。
如果用传统的直接写弹窗的二次确认方式
缺点1:业务代码会变得很多
缺点2:我本身是在别人已经做完的基础上新增一个接口拦截,参数是传递给另一个函数。可以使用弹窗组件就需要定义取消和关闭函数,我必须把原本组装好的数据丢给全局。然后在确定之后,从全局再拿回来丢回去。
如果我的组件封装可以像$confirm的回调函数方式或者primose方式一样,那么参数就不存在丢来丢去,函数也可以少写点。代码能少写一半。
本身其实在以前是写过类似的封装的,那会是写小程序的时候。但是太久没有写,忘记了。心里不甘心,然后周六回过来试了试。成功了
涉及知识
1、数据的脏数据检测
2、回调函数
3、vue的数据传值方式
第一种:数据监听方式
这里使用elementUI的弹窗来简化下
原理来自于我最早期的这部分:juejin.im/post/5d6c87…
一种数据监听的方式
1、弹窗部分代码
<template> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="colse">取 消</el-button> <el-button type="primary" @click="colse">确 定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { confirm() { this.dialogVisible = true; }, colse() { this.dialogVisible = false; if (this.callback != null) { this.callback(false); } }, coloseWin(callback) { this.callback = callback; } } }; </script> 复制代码
2、使用部分
<template> <div class="test"> <el-button @click="ceshi">测试</el-button> <DialogConfirm ref="DialogConfirm" /> </div> </template> <script> export default { data() { return {}; }, created() {}, components: { DialogConfirm: () => import("@/backstage/components/dialog_confirm/dialogConfirm.vue") }, methods: { ceshi() { const Confirm = this.$refs["DialogConfirm"]; Confirm.confirm(); Confirm.coloseWin(e => { console.log(e); }); } } }; 复制代码
第二种:promise方式
1、弹窗部分改为这样
<template> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="colse">取 消</el-button> <el-button type="primary" @click="queding">确 定</el-button> </span> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false }; }, methods: { confirm() { this.dialogVisible = true; return new Promise((resolve, reject) => { this.resolve = resolve; this.reject = reject; }); }, colse() { this.dialogVisible = false; this.resolve(111); }, queding() { this.dialogVisible = false; this.reject(true); } } }; </script> 复制代码
2、使用部分代码
<template> <div class="test"> <el-button @click="ceshi">测试</el-button> <DialogConfirm ref="DialogConfirm" /> </div> </template> <script> export default { data() { return {}; }, created() {}, components: { DialogConfirm: () => import("@/backstage/components/dialog_confirm/dialogConfirm.vue") }, methods: { ceshi() { const Confirm = this.$refs["DialogConfirm"]; Confirm.confirm() .then(e => { console.log(e); }) .catch(e => { console.log(e); }); } } }; </script>复制代码
这篇关于vue组件回调返回值,让你的代码更为简洁的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南