当前位置:首页>javascript>vue 中自定义全局函数

vue 中自定义全局函数

2018-07-16 5044 javascript
常见的函数写法,在某个 js 文件中定义方法,在其他组件使用时,先 import 再使用,如下: func.js 定义了多个函数方法
  1. function xxx(){
  2.   ...
  3. }
  4. function xxx2() {
  5.   ...
  6. }
  7. module.exports = {
  8.   xxx,
  9.   xxx2
  10. }
xxx.vue 中使用
  1. import {xxx,xxx2} from "xxx.js"
  2. xxx()
  每次用该方法时都需要 import {xxx,xxx2} from "xxx.js",无疑带来许多不必要的重复代码。 如果不想这么写,这就需要来定义全局函数。  

单个注册

常见的定义是这样的: 在入口 inde.js 文件写:
  1. Vue.prototype.xxx = function(){
  2.   ...
  3. }
  4. Vue.prototype.xxx2 = function(){
  5.   ...
  6. }
然后在子组件 xxx.vue 中直接调用该方法:
  1. this.xxx()
  2. this.xxx2()
这种是一个常见的写法,但是不太适用于多个。 因为太多导致入口文件 index.js 一大堆 function ,导致后期维护艰难,写函数注释也是无从下手。  

集中注册

有没有集中放在一个js文件中,然后再进行注册?有的 如: func.js 中改写成如下函数
  1. function xxx(){
  2.   ...
  3. }
  4. function xxx2() {
  5.   ...
  6. }
  7. // 直接挂载
  8. exports.install = function (Vue,opt) {
  9.   Vue.prototype.xxx = xxx;
  10.   Vue.prototype.xxx2 = xxx2;
  11. }
入口 index.js 中写:
  1. import AllFunc from "./func.js";
  2. Vue.use(AllFunc)
在子组件中直接写
  1. this.xxx()
  2. this.xxx2()
 

引入js框架

额外的,引入其他 js 框架挂载到全局 如引入 weui.js 文件中的函数 那么在 func.js 中添加挂载
  1. import weui from "weui.js";
  2. exports.install = function (Vue,opt) {
  3.   Vue.prototype.weui = weui;
  4. }
在子组件中直接写 weui.js 中的方法:
  1. this.weui.toast("xxx");
  完!  

评论 (1)

哈哈
哈哈 2019-05-21 16:11
评论我看看怎么样