我想将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/zh-CN/docs/Web/JavaScript/Reference/Statements/export
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句