在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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript表单事件处理方法详解
May 15 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
js实现验证码功能
Jul 24 Javascript
vue组件入门知识全梳理
Sep 21 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
flexigrid 参数说明
2010/11/23 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JsRender实用入门教程
2014/10/31 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
艺术节主持词
2014/04/02 职场文书
新手上路标语
2014/06/20 职场文书
理财计划书
2014/08/14 职场文书
小学运动会开幕词
2015/01/28 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
倡议书格式及范文
2015/04/29 职场文书