工具类方法定义

不可避免的每个项目都会抽出很多数据处理的公共方法,统筹到工具类文件中,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>
  <div v-on:click="$utils.alertTip(123)">this is a second Vue component</div>
</template>

<script>

</script>

<style></style>

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

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

Logo

前往低代码交流专区

更多推荐