在vue中封装方法以及多处引用该方法详解


Posted in Javascript onAugust 14, 2020

步骤:

1.先建立一个文件,放你想封装的方法;然后导出;

部分代码:

在vue中封装方法以及多处引用该方法详解

在vue中封装方法以及多处引用该方法详解

注: 导出这个地方需要特别注意:如果是一个对象的话:export 对象;如果是一个函数的话:export { 函数 }

2.引入文件:

在vue中封装方法以及多处引用该方法详解

补充知识:vue uni-app 公共组件封装,防止每个页面重复导入

1、公共插件

实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用

#例如网络请求
var _this = this;
 this.api.userInfo({
 token: ''
 }
 
#通用工具
_this.utils.showBoxFunNot("是否退出登陆", function() {
 console.log("确定")
 _this.api.logOut({}, function(data) {
 _this.utils.setCacheValue('token', '')
 uni.redirectTo({
 url: '/pages/LogIn/LogIn'
 });
 })
 })

公共插件utils.js 或者可以将网络请求api.js 封装成对象

var utils = {
 function_chk: function(f) {
 try {
 var fn = eval(f);
 if (typeof(fn) === 'function') {
 return true;
 } else {
 return false;
 }
 } catch (e) {

 }
 return false;
 },
 showBox: function(msg) {
 uni.showModal({
 title: "错误提示",
 content: "" + msg,
 showCancel: false,
 confirmText: "确定"
 })
 },
 showBoxFun: function(msg, fun) {
 uni.showModal({
 title: "提示",
 content: "" + msg,
 showCancel: false,
 confirmText: "确定",
 success: (res) => {
 fun(res)
 }
 })

 },
 showBoxFunNot: function(msg, fun, cancel) {
 var _this = this
 uni.showModal({
 title: "提示",
 content: "" + msg,
 confirmText: "确定",
 cancelText: "取消",
 success: (res) => {
 if (res.confirm) { //取消
 if (_this.function_chk(fun)) {
 fun(res)
 }
 } else if (res.cancel) { //确定
 if (_this.function_chk(cancel)) {
 cancel(res)
 }
 }
 },
 can: (err) => {

 }
 })

 },
 notNull: function(obj, msg = '参数不能为空') {
 var keys = Object.keys(obj);
 console.log(keys)
 for (var i in keys) {
 var keyName = keys[i]
 console.log(keys[i])
 var value = obj[keyName]
 if (value == '') {
 console.log("为空的参数:",keyName)
 this.showBox(msg)
 return true;
 }
 console.log(value)
 }
 return false;
 },
 getCacheValue: function(key) {
 var value = '';
 try {
 value = uni.getStorageSync(key);
 } catch (e) {

 }
 return value;
 },
 setCacheValue: function(key, value) {
 try {
 value = uni.setStorageSync(key, value);
 } catch (e) {

 }
 }
}
export default utils

2、注册到vue 实例中

main.js 文件中将工具注册进入

import utils from 'common/utils.js';
import api from 'common/api.js';

Vue.config.productionTip = false
Vue.prototype.utils = utils
Vue.prototype.api = api

以上这篇在vue中封装方法以及多处引用该方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
JS+css3实现幻灯片轮播图
Aug 14 #Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
jQuery中event.target和this的区别详解
Aug 13 #jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 #Javascript
You might like
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
详解Vue方法与事件
2017/03/09 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Django实现内容缓存实例方法
2020/06/30 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
护理助产毕业生的求职信
2014/03/02 职场文书
读书演讲主持词
2014/03/18 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript