Регистрация компонентов

Для этого урока предполагается знание базовых компонентов. Названия компонентов

Когда мы хотим зарегистрировать компонент, ему всегда будет дано имя. Например, в глобальной регистрации видно пока:

Vue.component('my-component-name', { /* ... */ })

Первым аргументом Vue.component является имя компонента.

Место, которое мы собираемся использовать, может повлиять на его название. всякий раз, когда мы используем компонент непосредственно в DOM, настоятельно рекомендуется следовать правилам w3c для имен пользовательских тегов (все строчные буквы должны содержать дефис). Это поможет нам избежать конфликта с текущими и будущими элементами HTML.

Название корпуса

Существует два варианта определения имени компонента:

С кебабом

Vue.component('my-component-name', { /* ... */ })

В этом случае вы можете использовать <my-component-name> только для ссылки на компонент.

С помощью PascalCase

Когда мы определяем компонент в PaschalCase:

Vue.component('MyComponentName', { /* ... */ })

Мы можем использовать <my-component-name> как в kebab-case или <MyComponentName> для ссылки на компонент. Однако только имена в кебаб-кейсах действительны в DOM напрямую.

Использование Vue.component для создания компонентов делает их глобально зарегистрированными, и мы можем использовать их в любом экземпляре Vue (новом Vue), созданном после регистрации:

JS

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })```
```new Vue({ el: '#app' })```
HTML
```<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Местная регистрация

Глобальная регистрация не идеальна в большинстве случаев. При использовании системы сборки, такой как веб-пакет, глобальная регистрация всех компонентов означает, что даже если мы прекратим использование компонента, он все равно может быть в нашей окончательной сборке. Это увеличивает количество JavaScript, которое пользователь должен загрузить. В таких случаях вы можете определить ваши компоненты как простые объекты JavaScript:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

Затем используйте опцию компонентов, чтобы определить компонент, который вы хотите использовать:

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Для каждого свойства в объекте компонентов ключом будет имя пользовательских элементов, а значение будет содержать объект параметров для этого компонента.

Локальная регистрация в модульной системе

Настоятельно рекомендуется создать каталог компонентов с каждым компонентом в отдельном файле.

Затем каждый из этих компонентов может быть импортирован по мере необходимости, прежде чем вы зарегистрируете их в новом файле .vue или .js:

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

Там иногда, когда наши компоненты являются относительно общими, и, возможно, обернуть отдельные элементы, такие как кнопки или ввода. И это могут быть базовые компоненты, которые часто используются повторно. Таким образом, мы могли бы иметь длинный список базовых компонентов, который включен во многие компоненты:

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

И они могут поддерживать только небольшую разметку в шаблоне:

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

К счастью для нас, если мы используем Webpack (или Vue CLI 3+), мы можем использовать require.context, который будет глобально регистрировать только эти общие базовые компоненты в файле ввода нашего приложения (например, js / app.js):

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
  // find relative path of the components folder
  './components',
  // look in subfolders
  false,
  // The regular expression used to match base component filenames is 
  /Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
  // Get the component config
  const componentConfig = requireComponent(fileName)
  // Get the PascalCase name of component
  const componentName = upperFirst(
    camelCase(
      // retrieve the file name regardless of folder depth
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )
  // Register the component globally
  Vue.component(
    componentName,
    // Look up the component options on `.default`, this will
    // exist if the component was exported with `export default`,
    // if not it will fall back to module's root.
    componentConfig.default || componentConfig
  )
})