vue.prototype.$xxx的使用

每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。

import utils from '@/pages/util/utils'
Vue.prototype.$util=utils  

在这里插入图片描述
简而言之,就是说,你在当前项目中,可能会用到很多的工具方法,公共方法,但是你不想去污染全局的一个作用域或者每个组建中重复写同样的方法,那么就可以通过vue.prototype去定义成他的实例对象.

比如:

export default {
    dataURLtoFile(dataurl, filename) { //将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    },
    //文件转换为base64
    file_base(file, name) {
        return new Promise((resolve, reject) => {
            var file_reader = new FileReader();
            file_reader.onload = (function () {
                resolve(this.result);//返回
            });
            file_reader.readAsDataURL(file);
        });
    },
}

这是我写的一个utils.js方法,通过exprot defalut导出全局的默认方法,光导出还不够,还需要在main.js中去引入,
在这里插入图片描述
那么如何去使用呢?简单,在vue组件内的方法中通过this.$utils.xxx即可调用utils中的方法了.
在这里插入图片描述
好比这样的调用,只关注矩形圈出来的,后面的.then不用看,因为我对这个方法做了promise的处理!
在这里插入图片描述

再举个列子:
这里是页面中对$qyrz的使用,为了让控制弹窗。
在这里插入图片描述
这是main.js中对它的引用
在这里插入图片描述
这是qyrz方法的编写
在这里插入图片描述

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值