Vue.js实现全局公共方法 / 网络研习社#51

Vue.js实现全局公共方法 / 网络研习社#51

vue.jpg

对于常用的重复使用的代码,可以把它写成公共方法,然后在全局使用。当然这是一个最用的技巧,也是一种标准的编程方法。

Vue.js中要实现全局方法,可以使用插件的写法。比如npm, 这些包都是些代码高手整理出来通用的方法,你一安装挂载上就可以全局使用!这可以大大加快你的开发进程。

这里不介绍插件的写法,用的是另一个简洁便利的写法,可以制作出全局公共方法。其实在Vue.js中过滤器也可以使用这种方法来写的。

主要有两步:
1.utitls -> 定义方法或变量,export出来
2.main.js中导入并挂载到全局使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//utitls-getstr.js
const getstr = function(){
function randomString(length, chars) {
let result = ''
for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)]
return result
}
return randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')
}
export {getstr}

//main.js
import {getstr} from "./utils/getstr"
Vue.prototype.getstr = getstr
全局即可使用:this.getstr()

在上面的案例中,假如我们要得到一个生成字符串的方法(这是用于生成网址的),就可以按照如上的方法来实现,在全局即可使用:this.getstr()来得到所想要的字符串的。是不是感觉很实用!


This page is synchronized from the post: ‘Vue.js实现全局公共方法 / 网络研习社#51’

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×