How to Communicate between Components in Vue.js

#vue #webdev #javascript #intermediate

Every framework has its own unique architecture but they have one thing in common. The entire page is divided into small components where the component has its own functionalities and UI. And sometimes, we need a way to communicate between these components.

Generally, we use Vuex (State management tool) to store the data and use it across components. But sometimes, we need a way to send the data from one component to another without using the Vuex store. In this article, we will learn the possible ways of achieving that.

There are five ways to send the data from one component to another:

1. Using Props (Parent to Child Communication)

2. Using Events (Child to Parent Communication)

3. Using Event Bus (Communication between any components)

4. Using provide/inject (Parent to Child Communication)

5. Using this.$refs (Parent to Child Communication)

Let’s study them one by one and see how they work.

1) Using Props (Communication from parent to child )

One can send data from parent-to-child components using props. In the below example, we are sending the data from parent. vue to child. vue via the prop message.

We have created a component that prints the message. We have defined a variable in props called message which we are rendering in the template.

While we nest the child component inside our parent component, we are binding the data we want to send by using the directive v-bind and sending the data using props.

Any time the parent changes the prop, the new value is sent to the child and rerendered.

2) Using Events (Communication from child to parent )

This is similar to props but we are sending the data from child to parent and instead of using v-bind, we are using directive v-on for capturing.

We have defined a variable in the child component which contains our message. We are sending the same to the parent component by firing an event from the child component.

this.$emit(’name-of-the-event’, args1, args2, args3,...) is a way to fire the event. This is captured on the parent component using directive v-on. Note that one should use the same event name they sent while capturing and can retrieve the arguments.

Any time the message in the child component changes, the new value is sent to the parent and rerendered.

3) Using Event Bus (Communication between any two components)

An event bus is used to communicate between any two components (Components need not have a parent-child relationship). This can be used when one needs to manually listen for events on a component instance.

You can just send the data from one component using this.$root.$emit(’name-of-emitter’, args1, args2, ...) and is captured using the same name like this this.$root.$on(’name-of-emitter’, args1, args2, ...) in the other component.

Note that we are using mounted() {} to capture the event in component-two. vue.

4) Using Provide/Inject (Parent to child communication)

This is used in the structure where you have deeply nested components and you only need something from the parent component in the deeply nested child.

In that case, you still need to pass the prop down the whole component chain which might be annoying. For such cases, we can use the provide and inject pair.

Although the example we have here is very simple, we are still sending a message from parent to child and hence it works.

We are using our parent component as a provider, sending the data, and injecting it into the child component using the same name.

Parent components can serve as dependency providers for all its children, regardless of how deep the component hierarchy is.

5) Using this.$refs (Parent to Child Communication)

This method is the least preferred way of making the communication but it is one of the options available.
Despite the other methods, sometimes you might still need to directly access a child component. To achieve this you can assign a reference ID to the child component using the ref attribute.

Here we are referencing the child component as ‘child’ (ref= child) (reference ID) and then capturing it using this.$refs.child. We can access anything related to the child component in this way.