javascript - Vue Js-在单个Vue组件中的多个js文件中拆分method.js

我想将methods.js拆分为多个文件，并将其导入我的单个vue组件中，如下所示:

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  data: {}
  methods: [script1, script2, script3],
  ...
}

但它不起作用。

有没有办法在不使用Mixins的情况下实现这一点？

最佳答案

以下应该工作:

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  methods: { script1, script2, script3 }
}

注意[]已更改为{}。

这假定您的脚本文件正在使用默认导出功能。

然而...

编写methods: { script1, script2, script3 }是ES6的简写形式:

methods: {
  script1: script1,
  script2: script2,
  script3: script3
}

因此，最终将得到3种方法，分别称为script1，script2和script3。

此处的命名问题很容易解决，导入时只需要使用适当的名称即可。就像是:

import getUserStatus from './script1.js'

export default {
  methods: {
    getUserStatus
  }
}

以这种方式进行操作，在script1.js内部调用什么函数都没有关系，名称的选择是您在导入时进行的选择。

要在script1.js中使用默认导出，将是这样的:

export default function (/* function args here */) {
  // ...
}

这将创建一个匿名函数。如果愿意，您可以选择给它起一个名字。

这种方法有两个潜在的问题:

您只能从每个文件导入一个功能。

导入函数时选择名称。如果其他代码需要特定的名称，则可能导致重复并可能导致错误。

解决这些问题的一种方法是使用命名导出而不是默认导出。因此，在script1.js中，它可能类似于:

export function getUserStatus (/* function args here */) {
  // ...
}

export function getUserGroup (/* function args here */) {
  // ...
}

然后，您可以使用以下命令导入这些文件:

import { getUserStatus, getUserGroup } from './script1.js'

export default {
  methods: {
    getUserStatus,
    getUserGroup
  }
}

如果您希望导入者选择要包含的功能，则此方法很好。但是，如果每个文件导出的功能都需要使用完全正确的名称一起包含在内的多个功能，则可以改为:

export default {
  getUserStatus (/* function args here */) {
    // ...
  },

  getUserGroup (/* function args here */) {
    // ...
  }
}

这再次使用默认导出，但是这次我们要导出包含两个函数作为属性的对象。然后，我们可以在组件中将其用作:

import script1 from './script1.js'

export default {
  methods: {
    ...script1
  }
}

在这里，使用散布运算符将script1的属性复制到methods配置对象中。方法的名称将与导出对象中属性的名称匹配。在这种情况下，用于保存导入对象的标识符script1对方法名称没有任何影响。

但是，如果您遇到这种情况，尝试导入多个相互关联的方法，则可能会发现使用mixin更好，因为无论如何似乎您将需要的不仅是方法。

各种export形式的引用:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export