代码之家 › 专栏 › 技术社区 › Ready Dev

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

vuejs2 vue.js javascript

Ready Dev · 技术社区 · 8 年前

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

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

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

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

2 回复 | 直到 8 年前

Roland 8 年前

以下是3种方法 我比较喜欢方法3。

方法1

创建一个 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
}

Prashant 8 年前

您可以使用官方文档中描述的模式自动注册这些重复的基础组件。

https://vuejs.org/v2/guide/components-registration.html#Automatic-Global-Registration-of-Base-Components

Chris Fritz 在他的书中也谈到了这种模式 awesome video 其中他提到了7个秘密模式,用于在使用 Vue.js

然而,这种方法的缺点是,这样自动调用的组件总是在主束中结束,因此不能懒惰加载/代码拆分。因此,请确保仅对非常通用的基本组件执行此操作。