Компонент внутри компонента vue?

Question

[Андрей]

У меня есть главный компонент Main. В нем есть компонент Sidebar. Для каждой страницы содержимое Sidebar должно быть разным, поэтому я создал отдельные компоненты для каждого, чтобы размещать их на нужных страницах.
В компоненте main я регистрирую их:

import MiddleBar from '@/components/Main/MiddleBar/MiddleBar'
import Streams from '@/components/Main/MiddleBar/Elements/Streams'

export default {
  components: {
    MiddleBar,
    Streams
  }
}

И пытаюсь их вставить (синтаксис Pug):
| <MiddleBar> <Streams></Streams> </MiddleBar>
Ничего не работает.

Не могу понять, в чем ошибка. В документации о вложенности компонентов ничего не нашел. :(
Тем более на pug.

Answer 1

[shmatuan]

https://ru.vuejs.org/v2/guide/components.html#Расп...

Comments

[Андрей]

Да, это то, что нужно. Спасибо.

Answer 2

[Serhii Karavashkin]

вам надо в компоненте main оставить вот так

import MiddleBar from '@/components/Main/MiddleBar/MiddleBar'

export default {
  components: {
    MiddleBar
  }
}

а в компоненте MiddleBar сделать вот так

import Streams from '@/components/Main/MiddleBar/Elements/Streams'

export default {
  components: {
    Streams
  }
}

и так можно делать вложения до бесконечности