vue.prototype.$xxx的使用
每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。import utils from '@/pages/util/utils'Vue.prototype.$util=utils简而言之,就是说,你在当前项目中,可能会用到很多的工具方法,公共方法,但是你不想去污染全局的一个作用域或者每个组建中重复写同样的方法,那么就可以通过vue.protot
·
每一个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条内容
所有评论(0)