Não consegui entender até onde posso dividir meus componentes no Vue.js
É comum que um aplicativo seja organizado em uma árvore de componentes aninhados:
Por exemplo, você pode ter componentes para um cabeçalho, barra lateral e área de conteúdo, cada um contendo normalmente outros componentes para links de navegação, postagens de blog, etc.
É correto então eu fazer dessa maneira?
- Menu
- Submenu
- Tópicos do submenu
- Submenu
Vamos imaginar essa seguinte imagem:
Então:
Menu seria o Avô, submenu o pai e os tópicos os filhos?
Não entendi ao certo como funciona corretamente essa parte de components.
Se eu tivesse então mais um submenu em Biology ele entraria aqui sendo como neto (do pai claro)?
Edit 1: Vou dar em versão de código, isso pode ajudar a esclarecer mais a pergunta:
JS
Vue.component('navbar',{
template: '#navbar'
})
Vue.component('submenu',{
template: '#submenu'
})
Vue.component('lista-submenu',{
template: '#lista-submenu'
})
Ok, aqui ficará mais claro, eu tenho 3 componentes navbar
, submenu
e lista-submenu
O navbar
seria o Learn da foto
O submenu
Home, Knowledge Map, Math, Science, etc
A lista-submenu
Biology, Chemistry, Physics...
Agora o que acontece se eu tiver outro submenu?
Exemplo
Empresa -> navbar
Fale Conosco, Entre em contato, O que somos -> submenu
(Vazio) -> lista-submenu
Dúvida:
- Vai ser ou outro componente, tipo
lista-submenu-2
- Até onde eu posso continuar quebrando em componentes