All the ways I could think of on how to make your components communicate between each other

Despite the usual intros I’ve seen in these kinds of articles, I’m not going to go into describing Vue here. If you are here, it means you know what VueJS is, or at least you’ve heard of it, and you want to learn more about it. So, let’s get right into it.

Note: With Vue 3 around the corner, there are some changes coming, but the core concepts of components and communication between them will not change and all these principles will still apply when the v3 hits the metaphorical shelves.

Note 2: This might be a bit longer article than you’re used to.

A word about components

If you are familiar with components in VueJS, you can probably skip this part, because it’s essentially an intro for the beginners.

You can think of the components as the building blocks of your application. If you’ve worked on any project before, you probably noticed that web pages and apps can be broken down into smaller chunks that can often be reused with small alterations or no changes at all. That’s exactly the point of components — building the app using smaller parts and combining them together. As VueJS documentation says, the components are an abstraction that lets us build large-scale applications composed of small, self-contained, and often reusable components.

For better understanding, take a look at the diagram below, it’s a similar diagram to the one on the official VueJS documentation website:

As you can see, components can be a part of other components, and also can contain other components. We can refer to the components as parent and child components, depending on where they are located. On the illustration above, component A is a parent component to the components B, C, and D, and component C is a parent of the components F and G. Components B, C, D are child components of component A, and F and G are child components of component C.

When building the apps with VueJS, every .vue file that you create is a component and it’s essentially a Vue instance with some predefined options. Each of these components has its own methods, data, props, computed etc, and when added in your app will have its scope.

Although components are sometimes self-contained and do not have any information going in or out, there are times when you need them to communicate with other parts of your application, for example with parent component, their child components, or with other components that are located somewhere far away it the component tree. They could be sending some data, or receiving it, or reacting to the changes that you made in some other components.

For more information about components and component registration, take a look at the official VueJS documentation.

Based on their place in app structure, let’s see what are the ways to communicate between the components.

#programming #vuejs #javascript #web-development #vue