Components in Vue.js

Asked

Viewed 94 times

1

I couldn’t understand how far I can divide my components in Vue.js

It is common for an application to be organized into a component tree nested:

inserir a descrição da imagem aqui

For example, you may have components for a header, bar side and content area, each containing normally other components for navigation links, blog posts, etc.

It’s right then I do it this way?

  1. Menu
    1. Submenu
      1. Topics of the submenu

Let’s imagine this following picture:

inserir a descrição da imagem aqui

So:

Menu would be the Grandfather, submerge the father and the children topics?

I’m not sure how this part of Components works properly.

If I had then one more submenu in Biology he would enter here being like grandson (of course father)?

Edit 1: I’ll give you in code version, this may help clarify the question further:

JS

        Vue.component('navbar',{

            template: '#navbar'

        })
        Vue.component('submenu',{

            template: '#submenu'

        })

        Vue.component('lista-submenu',{

            template: '#lista-submenu' 

        })

Okay, here it will be clearer, I have 3 components navbar, submenuand lista-submenu

The navbar would be the Learn of the photo

The submenu Home, Knowledge Map, Math, Science, etc

To lista-submenu Biology, Chemistry, Physics...

Now what happens if I have another submenu?

Example

Enterprise -> navbar

Contact Us, Contact Us, What We Are -> submenu

(Emptiness) -> lista-submenu

Doubt:

  1. It’s gonna be, like, another component, like, lista-submenu-2
  2. As far as I can keep breaking into components
vue.js components

  • Parent menu is the main menu example: Home Company Blog Contact << are parent menus The submenus that belong to them are the children. .

  • And the topics would be grandchildren?

  • No menu topics, only submenus '-'

  • Look at your print, it’s a burger menu and a menu with submenus.

  • I’ll edit the question, better.

1 answer

0

I’ll explain to you what is menu and what is 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 is the hidden menu container known as Burger, and after clicking on it opens the menu with its submenus.

I think it makes it clearer

Browser other questions tagged vue.js components

You are not signed in. Login or sign up in order to post.