How can vue encapsulate public methods be used on other pages?

encapsulate a public method, and then introduce this file in other pages to call it, always reporting Error in callback for watcher "list": "TypeError: Object (...) is not a function" found in

// publicarray-merge.js
export default function steamroller(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; iPP) {
    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);
    }
}
Apr.01,2022

functions exported with default keywords, that is, export default , cannot be imported import {modelName} from in this way
can only be imported in import modelName from
import {modelName} from , which only applies to

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

export {steamroller};

this export method


use export default function to create a method reference without adding {} , but use export function to create a method that needs to add {}
I remember it before. It seems to be solved like this. It takes too long to remember, you can try


it is necessary to say that there can be only one export default and multiple export in a file. So use {} to deconstruct references in other files when using export. Not necessary to use export default.

Menu