Javascript vue.js中有多个导入和注册的组件

我正在重构我的应用程序中的一些代码，结果发现，下面的逻辑在许多组件中重复

import component1 from '...'
import component2 from '...'
import component3 from '...'
//...many others

export default {
    //other data
  components: {
    component1,
    component2,
    component3
    //...
  }
}

是否存在一种更短的方法来清理我的代码？

---

感谢您的时间

您可以使用官方文档中描述的模式自动全局注册此类重复的基本组件

在他的文章中也谈到了这种模式，他提到了7种秘密模式，用于在使用

然而，这种方法的缺点是，以这种方式自动注册的组件总是以主捆绑包的形式结束，因此不能延迟加载/代码拆分。因此，请确保仅对非常通用的基本组件执行此操作

---

---

下面是3种方法。顺便说一句，我更喜欢方法3

方法1

在我的案例中创建一个

js

文件

dynamic\u imports.js

：

export default function (config) {
    let registered_components = {}
    for (let component of config.components) {
        registered_components[component.name] = () => System.import(`../${config.path}/${component.file_name}.vue`)
    }
    return registered_components
}

在您有许多组件导入和注册的组件中

import dynamic_import from '@/services/dynamic_imports' //importing the above file
let components = dynamic_import({
    path: 'components/servers',
    components: [
        { name: 'server-one', file_name: 'serverOne' },
        { name: 'server-two', file_name: 'serverTwo' },
    ]
})

export default {
//...other code
    components: components
}

export default function ({path, file_names, component_names}) {
    let registered_components = {}
    for (let [index, file_name] of file_names.entries()) {
        registered_components[component_names[index]] = () => System.import(`../${path}/${file_name}.vue`)
    }
    return registered_components
}

因此，您将使用“干净代码”导入并注册组件。 但是请注意这对我来说很有效，可能需要稍加修改以满足您的需要，以便理解：

属性

path

表示将在该路径中查找

file\u name

中指定的名称。

name

属性是您注册组件的名称

方法2 如果您不喜欢以上内容，请以另一种方式查看以下内容：

方法3 如果您再次表示：这不是一种更干净的方式，请查看下面的内容，但请记住，如果您在团队中工作，并且技能不同，那么一些程序员将有点困惑

dynamic_imports.js

import dynamic_import from '@/services/dynamic_imports' //importing the above file
let components = dynamic_import({
    path: 'components/servers',
    components: [
        { name: 'server-one', file_name: 'serverOne' },
        { name: 'server-two', file_name: 'serverTwo' },
    ]
})

export default {
//...other code
    components: components
}

export default function ({path, file_names, component_names}) {
    let registered_components = {}
    for (let [index, file_name] of file_names.entries()) {
        registered_components[component_names[index]] = () => System.import(`../${path}/${file_name}.vue`)
    }
    return registered_components
}

在您的组件中

import dynamic_import from '@/services/dynamic_imports'

let components = dynamic_import({
    path: 'components/servers',
    file_names: ['serverOne', 'serverTwo'],
    component_names: ['server-one', 'server-two']
})

export default {
    components: components
}

---

谢谢你的回答。虽然我的问题中指定了太多的组件，但我想如果我在全球注册所有组件，会发生什么。我需要做一些更改，但对我有效！！谢谢