What is the use of a child component in Vue.js ,why create child components at all?

2
votes

I am new to vue.js I have come across child Components and I know that data is rendered in the parent component and not in the child ,also that child component is more flexible when data /props needs to be passed. Any fundamental or key reason that I am missing ?

2
vue.jsvuejs2vue-component
Possibly related: stackoverflow.com/questions/58242512 - skirtle

2 Answers

0
votes

It helps to think of components as generic pieces of functionality that can be combined together like Legos. There's not really a distinction between "parent" and "child" components, except that components can nest inside one another. So the real question is whether this nesting and modularity is useful.

It's no different in Vue than with software in general. The benefits of modular code are well documented, but the highlights are:

  • Reuse
  • Legibility
  • Separation of concerns

If you find yourself wanting to reuse some functionality, make it a component rather than copy/paste. If you find your code becoming really long so it's confusing and hard to navigate, break it into logical components in separate files. If you find cases where something logically should have one job, like a dialog box, that's a good candidate to be its own component rather than mushed into other code.

That all said, you could have an app that's just a single big component. But beyond trivial apps, anything of moderate size and complexity will benefit.

0
votes

Welcome to the world of Vue.js! :D

You basically got the gist of components! Child components are confusing if you think about it in a purely hierarchical way (data passed up and down to it and it can be related to a parent component/instance). Boring right? What worked for me (I'm learning too!) was thinking about it like this:

Single File Components vs. Vue.component:

You have a navigation bar on a website but you want to ""isolate" or "encapsulate" that code into its own group rather than have it weaved into other code that the navbar's in, such as the Home page (or globally in App.vue - although navbars are better as global elements!). This helps to modularize your code and reuse that code anywhere in your application, allowing it to scale better than defining them using the Vue.component. If this is still confusing, check out this Medium article on using Vue.js single-file components and why you want to use them.

For me, I usually always work with Single File Components since it's easier to define where I want it in my code, as well as the hierarchy is clearer to me (i.e What's a child and what's a parent)! I am then able to reuse that code wherever I want!

This can go as far as having components nested within components (super cool) - How to Nest Components in Vue, and as always, the Vue.js docs on Component Basics (scroll a bit down under "Organizing Components").

Overall: What you said in the subject line still applies no matter which way you define a component! It's really the scalability and reusability that Single File Components offer that make them better than using just Vue.component :D

  • NOTE: There are some changes to Vue.js that will follow after its major release of Vue 3! Exciting stuff and you can keep track of and read the beta docs.

For learning Vue 3, I HIGHLY recommend Vue Mastery's courses:

Hope this helps! :D