一、vue 使用引入的公共方法(utils)时报错: Failed to resolve async component default: TypeError: Object(...) is not a ...

vue 如何引入函数节流、防抖函数呢?

1、定义公共方法:utils/publickMethos.js

// 函数节流
const throttle = function(fn, delay){
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
        }, delay)
    }
}

// 函数防抖
const shakeProof = (fn, time) => {
    var timer;
    return function(){
        var _this = this;
        var args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            fn.apply(_this, args);// 用 apply 指向调用 shakeProof 方法的对象,相当于 _this.fn(args);
        }, time);
    }
}

export default {
    throttle,
    shakeProof
}

2、然后在vue文件中引入 utils/publickMethos.js 文件

这样写会报错:Failed to resolve async component default: TypeError: Object(...) is not a 

import { throttle } from '../utils/publicMethods'

methods: {
        sendSms: utils.throttle(function(){
            // ...
        }, 5000),
}

改成这样就OK了:

import utils from '../utils/publicMethods'

methods: {
        sendSms: utils.throttle(function(){
            // ...
        }, 5000),
}

分析原因:

  • 通过 import { throttle } from '../utils/publicMethods' 引入的默认是对象而不是函数。
  • 通过 import utils from '../utils/publicMethods' 引入的 utils 是一个指针指向 '../utils/publicMethods' 里面的方法。
Logo

前往低代码交流专区

更多推荐