1

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:

inserir a descrição da imagem aqui

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?

  1. Menu
    1. Submenu
      1. Tópicos do submenu

Vamos imaginar essa seguinte imagem:

inserir a descrição da imagem aqui

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, submenue 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:

  1. Vai ser ou outro componente, tipo lista-submenu-2
  2. Até onde eu posso continuar quebrando em componentes
5
  • Menu pai é o menu principal exemplo: Inicio Empresa Blog Contato << são menus pais Os submenus que pertencem a eles são os filhos. Uma forma simples de entender isso é o seguinte, tem o líder e seus subordinados o menu pai é o líder e os submenus seus subordinados. 16/07/2019 às 14:32
  • E os tópicos seriam netos?
    – user152996
    16/07/2019 às 14:33
  • Não tem tópicos em menu, só submenus '-' 16/07/2019 às 14:33
  • Olha sua print, é um menu hambúrguer e um menu com submenus. 16/07/2019 às 14:34
  • Vou editar a pergunta, melhor.
    – user152996
    16/07/2019 às 15:32

1 Resposta 1

0

Vou te explicar oque é menu e oque é submenu.

<nav class="navbar">
<!--Container do menu -->
</nav>

<nav class="navbar">
    <ul>
      <!--Tudo que está nesse ul é menu -->
      <li>Home</li>
      <li>Empresa
         <ul>
          <!-- Tudo que está nesse ul é submenu -->
            <li>Nossa história</li>
         </ul>
      </li>
    <ul>
</nav>

*Learn é o container do menu escondido conhecido como Hambúrguer, e após clicar em cima dele abre o menu com seus submenus.

Acho que assim fica mais claro

Você deve fazer log-in para responder a esta pergunta.