在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 Event学习第三章 早期的事件处理程序
Feb 07 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
js constructor的实际作用分析
Nov 15 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
vue如何截取字符串
2019/05/06 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
华润集团网上药店:健一网
2016/09/19 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
一道输出判断型Java面试题
2014/10/01 面试题
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Apache Hudi的多版本清理服务彻底讲解
2022/03/31 Servers