Vue глобальная регистрация компонентов

Question

Приложение собрано через init vue@latest, кое-что не понимаю. Как правильно глобально регистрировать компоненты?

Есть следующий компонент:

<template>
  <header class="nav container-fluid pt-3">
    <h1 class="title">CCJ Music</h1>
    <h2>Charts</h2>
    <h2>Albums</h2>
  </header>
</template>

<script>
export default {
    name: 'MainHeader'
}
</script>

Он импортирован в js файле который находится в корневой папке с компонентами.

Туда так же попадут остальные компоненты и буду экспортированы как массив

import MainHeader from '@/components/UI/hard/mh.vue'

export default [
    MainHeader,
]

В main.js регистрирую все компоненты:

import components from '@/components/UI/library.js';

const app = createApp(App)

components.forEach(component => {
    app.component(component.name, component)
})

Все правильно регистрирует, но почему то при использовании его в экземпляре он не работает:

Вот экземпляр:

<template>

  <MainHeader></MainHeader>

</template>

<script>

export default {
  components: {
    // когда регистрирую его тут, он не может его найти https://i.gyazo.com/bb84ef3ac0719c0d7155411debde9612.png
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

</style>

Answer 1

Ваша ошибка связана с тем, что вы ожидаете компонент по имени тега <MainHeader> (CamelCase), а Vue ожидает название в kebab-case:

MainHeader -> main-header

Это связано с тем, что браузер приводит все теги и атрибуты к нижнему регистру и когда vue приступает к синтаксическому анализу DOM, в нем ваш тег MainHeader будет приведен к виду mainheader и соответственно не будет разрешен Vue. Предостережения при синтаксическом анализе шаблона DOM

Чтобы избежать подобных проблем, вам следует запомнить одно правило по поводу именования компонентов (атрибутов, тегов):

в HTML = kebab-case, в JavaScript = СamelCase

Пример (обратите внимание, в стартовом html блоке используется <main-header> (kebab-case), а в template компонента MainHeader используется <MainComponent> (CamelCase)

const {
  createApp
} = Vue;


const MainHeader = {
  name: 'MainHeader',
  template: `
    <header class="nav container-fluid pt-3">
    <h1 class="title">CCJ Music</h1>
    <h2>Charts</h2>
    <h2>Albums</h2>
   
      <MainComponent />
  </header>
  `
}

const MainComponent = {
  name: 'MainComponent',
  template: `
    <footer>
      MainComponent
    </footer>
  `
}
const components = [
  MainHeader,
  MainComponent,
]

const app = createApp()

components.forEach(component => {
  app.component(component.name, component)
})

app.mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <main-header></main-header>
</div>

БЛОГ НА HUSL

Vue глобальная регистрация компонентов

Ответы (1 шт):