Component Communication in VueJs

In most Javascript frameworks, the entire web page is divided into smaller components and together with all those components, we call a web page. As developers, we need to stick to best practices to use the same components multiple times in our web application. So let’s discuss the components in Vuejs and how they interact with other components.

The main things that you need to remember in using props are,

1. Props should not be mutated.

2. Props are uni-directional.

1. Simple Vue App with Props to communicate between components.

So let’s have a scenario where you use the props. So below, we use the one child component and a parent component. From the parent component, I pass a message to the child component and it will be displayed on the screen as below.

Parent Component Code Snippet

Here we pass the values to the child component through the message prop.

Display the values on the web page

The received props will be displayed on the screen as shown in the below screen.

So this is a simple example that how to use the props to communicate between components. So let’s have an example of being unable to mutate the props in Vuejs.

2. Example of unable to mutate the props.

Vue uses a concept called uni-directional data flow. This means that data passing from the parent component to the child component should only be changed at the parent component. (In here, in the App.vue file).

In order to change the data, we can define a property inside our child component and assign the received prop value from the parent component to it. Then after, we can change the values.

So here, we added the received prop value to receivedMessage property value. Then change the value using the selectMessageType property.

3. Validating the Props

We can receive the props using the following method and it is mostly used in simple web applications.

props: ['message', 'messageType']

But think, when you working on a team, you need to pass more data and this will need to validate the props passing. For that, you can replace the array of elements with an object like the one below. Within that object, you can have the props as javascript property names and certain values to them like the type of data that you going to input to them.

props: { message:{ type: String, required: true},}

If you have a non-required prop value, then you can have a default value to them as below.

props: { message:{ type: String, required: false, default: `Component Communication in VueJs`},}

Note: default can also be functions and it can be very simple function or mutch larger functions.

Here, you can also have a validator to validate the property value as shown in below. The validator is receiving the passed value from the other component.

props: { message:{ type: String, required: false, default: `Component Communication in VueJs`}, validator: function(value){return true;}}}

Note: if we have defined a property value with the required values and if we do not provide a value to that, it will not give an application error, only gives a warning to within the console.

Here, we pass a value of “Component Communication in VueJs” to the child component. But the child component is expecting the 1 or 0 values and otherwise this will give a warning message in the console as below.

4. Supported prop values

Specifically, the following value types (type property) are supported:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

But type can also be any constructor function.

5. Dynamic prop values

We can bind the props just like binding the other attributes. So can add the v-bind directive to the dynamic component and pass an object containing the prop names and values to pass props dynamically.

When your dynamic component looks like below.

<component :is="employeeComponent" v-bind="employeeProperties"></component>

In the Vue instance, the employeeProperties can change based on the current component.

data: function () {
  return {
    employeeComponent: 'myComponent',
  }
},
computed: {
  employeeProperties: function() {
    if (this.employeeComponent === 'myComponent') {
      return { name: 'Micheal' }
    }
  }
}

So when the employeeComponent is myComponent, it will have name property equal to ‘Micheal’. And when it isn’t, no properties will be passed.

6. Emitting custom events (child-> parent communication)

We just discussed how communication happened from the parent component to the child component. So what about communicating between the child component and the parent component. So let’s have a discussion about this.

Using emit, we can trigger events and pass data up the component hierarchy.

• Emitting data from an input
• Closing modals from inside the modal itself
• Making our parent component respond to one of its children

In the template section, we add the input and button get the values from the user. We bind the welcomeMsg data to the input field using the v-model directive as you can see. We click the button, changeMsg() method will be called. Inside that method, we emit the custom event changeMsg. There is the changeMsgVar as the data happens in the changeMsgVar.

So let’s see how we can listen to our custom event in order to handle this event and manipulate the data it is carrying.

We listen to our custom event,

<child-component @changeMsg=”setMessage” :msg=”welcomeMsg”></child-component>

The syntax @changeMsg is telling our app that a custom event named changeMsg is sent and defines what to do in order to react to it. So we defined the setMessage function to handle the custom event. Inside its body, we assign the message sent to the welcomeMsg data and this data is also passed to our HelloWorld.vue component through the msg prop.

In this article, we discussed various methods to communicate between different components through props and also emits. You can access the example project with the URL. Here is the summary which we discussed all throughout the tutorial.

Summary

1. Components are used to build UIs by combining them all.
2. Components are using unidirectional data flow to communicate between them. Mostly adapt to the parent-child relations.
3. Props are used to pass data from a parent to a child component.
4. Props should be defined in advance, possibly in great detail(type, required, etc)
5. Custom events are emitted to trigger a method in a parent component.
6. Custom events can carry data that can be used in the called method.

Hope you understand the tutorial and see you soon!