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

Question

I am refactoring some code in my app and turns out,the below logic it is repeated in many many components.

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

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

Does exists a shorter approach in order to clean my code? Thanks for your time

Answer 1

Below are 3 ways .I prefer method 3 by the way.

Method 1

Create a js file in my case 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
}

In the component in which you have many component imports and registrations

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
}

As a result you will import and register your components with "clean code". But note that this worked for me,maybe it has to modified a lit bit to fit your needs,to understand:

The property path means that will look at this path for the names specified in file_name .The name property is the name you register the component

Method 2 If you don't like the above look below to another way:

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')
    }
}

Method 3 If again you are saying: This is not a cleaner way,take a look below but keep in mind that if you are working in team and skills differ,then some programmers will be a little bit confused.

dynamic_imports.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
}

In your component

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
}

Answer 2

You can automatically register such repeated base components globally using the pattern described in the official docs

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

Chris Fritz also talks about this pattern in his awesome video where he mentions 7 secret patterns for cleaner code and productivity boost while working with Vue.js

The disadvantage of this approach, however, is that the components that you autoregister this way always end up in the main bundle and therefore cannot be lazy loaded/code-splitted. So make sure you do this only for the base components that are very generic.

---