vue自定义通用函数(全局函数)

在一个项目中,经常会出现多个地方都要使用到同一个函数的情况,尤其在vue的组件之间是相互独立的情况下,要是每次要使用到函数都要重新定义,这样会显得特别累赘繁琐,也会造成代码的冗余,所以有没有办法注册一个通用的函数供所有组件使用呢?

这就需要我们来自定义全局函数了,思想跟java的通用工具类基本是一样的,看过我几篇文章的亲们就会知道我做的项目是webpack+vue2.0+...的框架下实现的,所以基于此框架,我们该如何定义全局函数呢?

1、我们可以在src目录下新建一个通用的js来存放全局函数,比如我这里是建了util.js,你们也可以取名tool.js之类的,随你们高兴。因为可能会用到其他通用的js,为了代码的规范,我都将他们放到utils的文件夹里了,这些都是自定义的,命名没有强制要求

clipboard.png

然后怎么在util.js里面定义全局函数呢,如下:

/*
 *首先是相互调用,接收的地方用import,输出的地方用export
 *比如这里面需要用到cookie.js中的方法,那么就要先把cookie引用进来,这个思想跟后面的引用是一致的
 */
import cookie from './cookie';

/*
 *接下来是定义全局函数
 *因为全局函数是要给外部使用的,所以需要将函数用export告知外部即可
 *比如我们在这里定义了日期的格式,供后面组件统一改变
 */
//Date对象转化为yyyy-MM-dd格式
export function dateFormat(dateObj){
  var year = dateObj.getFullYear();
  var month = ("0" + (dateObj.getMonth() + 1)).slice(-2);
  var day = ("0" + dateObj.getDate()).slice(-2);
  return year + "-" + month + "-" + day;
}

2、如何调用全局函数,就跟上面提到的一样,那里需要用到就在那个组件的script开始的地方import进util.js的文件,然后调用util里面的函数就行了,如下:

<script>
    import * as util from '../../../utils/util'
    export default {
        data() {
          return {
              //这里调用了util的dateFormat()函数
              outputStartDate: util.dateFormat(new Date()),
          }
        }
    }
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值