Vue.js, как загрузить зависимые компоненты

Question

Vue.js: как загрузить зависимые компоненты?

Из маршрутизатора, который в данный момент использует компонент, следующим образом:

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

Но это отрисовывает шаблон перед импортом, вызывая ошибки.Есть ли лучший способ загрузки зависимостей?

В шаблоне используется - правильно ли вы зарегистрировали компонент.

Answer 1

Ваш корпус неверен. Используйте 'NewCompA' или 'new-comp-a' в качестве имени.

На самом деле, было бы еще проще использовать

import NewCompA from 'wherever/the/component/is/defined'

export default {
  components: {
    NewCompA
  }
}

Ваш шаблон может использовать либо

<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>

См. https://vuejs.org/v2/guide/components-registration.html#Name-Casing

Answer 2

После повторного просмотра кода он не выглядит нормальным.Вы присваиваете переменную A своему компоненту, но пытаетесь импортировать ее с переменной NewCompA ..

Вам необходимо изменить следующее:

Из этого:

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

Для этого:

import A from './A';

export default {
    components : {
        'NewCompA' : A
    }
}
...

и использованиеэто так:

<new-comp-a>