vue封装公共方法如何在别的页面如何使用?

Question

自己封装了一个公共的方法, 然后在别的页面引入这个文件来调用, 一直报Error in callback for watcher "list": "TypeError: Object(...) is not a function" found in

// 在public文件中新建array-merge.js的文件
export default function steamroller(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      newArr.push(...steamroller(arr[i]));
    } else {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// 在别的页面要用到该房改, 引入该文件
import { steamroller } from '../public/array-merge.js';
data() {
    return {
      filterOrderItems: [],
    };
},
methods: {
    list() {
        this.filterOrderItems = steamroller(this.OrderItems);
    }
}

Answer 1

加了default关键字 即export default 导出的函数不管你有没有命名都不能用import { modelName } from 这种方式导入
只能用import modelName from
import { modelName } from 这种写法仅适用于

function steamroller(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      newArr.push(...steamroller(arr[i]));
    } else {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

export {steamroller};

这种导出方式

Answer 2

用 export default function创建的方法引用的时候不需要加{}，用export function创建的方法才需要加{}
我记得之前遇到过，好像是这样解决的，时间太久了记不太清了，你可以试一下

Answer 3

有必要说一下一个文件里只能有一个export default，可以有多个export.所以当使用export时在其他文件里引用要使用{}来解构。使用export default就不需要。