Несколько импортированных и зарегистрированных компонентов в vue.js

Question

Я выполняю рефакторинг некоторого кода в моем приложении и получается, что приведенная ниже логика повторяется во многих многих компонентах.

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

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

Существует ли более короткий подход для очистки моего кода? Спасибо за ваше время

Answer 1

Ниже приведены 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 Если вы снова говорите: «Это не более чистый способ, посмотрите ниже, но имейте в виду, что если вы работаете в команде и у вас разные навыки, то некоторые программисты будут немного сбиты с толку.

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
}

В вашем компоненте

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

Вы можете автоматически зарегистрировать такие повторяющиеся базовые компоненты по всему миру, используя шаблон, описанный в официальных документах

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

Крис Фриц также рассказывает об этом шаблоне в своем потрясающем видео , где он упоминает 7 секретных шаблонов для более чистого кода и повышения производительности при работе с Vue.js

Недостаток этого подхода, однако, заключается в том, что компоненты, которые вы автоматически регистрируете таким образом, всегда оказываются в основном комплекте и поэтому не могут быть загружены / разделены по коду. Поэтому убедитесь, что вы делаете это только для базовых компонентов, которые являются очень общими.

---