时间戳

首页 > 解决方案 > vue.js 中多个导入和注册的组件

javascript - vue.js 中多个导入和注册的组件

问题描述

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

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

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

是否存在更短的方法来清理我的代码？谢谢你的时间

标签： javascriptvue.jsvuejs2

解决方案

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

方法一

在我的情况下创建一个js文件dynamic_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
}

因此，您将使用“干净代码”导入和注册您的组件。但请注意，这对我有用，也许它必须修改一点以满足您的需求，以了解：

该属性path意味着将查看此路径中指定的名称file_name。该name属性是您注册组件的名称

方法2 如果您不喜欢上面的方法，请看下面的另一种方法：

function import_component(cmp_name){
    return System.import(`@/components/${cmp_name}.vue`); 
}

export default{
    components: {
        'component1': () => import_component('componentOne'),
        'component2': () => import_component('componentTwo'),
        'component3': () => import_component('componentThree')
    }
}

方法3 如果你再次说：这不是一个更干净的方法，请看下面，但请记住，如果你是在团队中工作并且技能不同，那么一些程序员会有点困惑。

动态导入.js

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
}

推荐阅读