在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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
javascript 自定义事件初探
Aug 21 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Bootstrap实现模态框效果
Sep 30 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中jsonp的跨域实例
2013/06/21 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
初探nodeJS
2017/01/24 NodeJs
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
大专生自荐书范文
2014/06/22 职场文书
领导干部失职检讨书
2015/05/05 职场文书
工作时间证明
2015/06/15 职场文书
python 实现图片特效处理
2022/04/03 Python