Vue2项目架构搭建（七）——工具类方法调用

工具类方法定义

不可避免的每个项目都会抽出很多数据处理的公共方法，统筹到工具类文件中，vue在定义工具类方法和传统方法一样，只是用了es6的export default导出，示例如下：

export default{
alertTip (str) {
alert(str)
}
method1 () {

}
method2 () {

}
...
}

设置为全局属性

原始的调用方法直接在入口文件引入工具类文件就可以使用了，Vue同样是这样的思路，先引入，再设置为全局变量去调用，在main.js中加入如下代码：

import utils from './utils/index.js'
Vue.prototype.$utils = utils

当然你不想定义属性$utils，只想调用方法，只想在用到的地方引入使用，这个也是可以的，上一节 Vue2项目架构搭建（六）——axios调用接口、webpack代理跨域配置 中设置axios为全局属性没提为什么不单独使用，单独使用的话每次调用的地方都要导入一次axios，工具类也是相同。

设置为全局属性是为了便捷，少做点重复的事，也可以根据属性名更明白代码的用途，比如 $http一看就明白是调接口的。

工具类方法调用

例如上述定义的alertTip ()方法，在secondVue组件上的元素上绑定点击事件为alertTip ()

<template>
<
4000
div v-on:click="$utils.alertTip(123)">this is a second Vue component</div>
</template>

<script>

</script>

<style></style>

点击secondVue的div就会弹出“123”了

本人才疏学浅，如果哪位小伙伴发现问题或者有更好的优化，希望能留言我好及时修改和优化，大家一起学习一起进步，免得被不合理或者错误的东西误导后续看到此博文的小伙伴。