techferment
Published in

techferment

7. Data Flow between Components in Vue.js

Just like any other application, the Components organization goes like a nested tree. For example, a simple website that includes a header, sidebar, and some other components in a container. The organization of the component would be like this.

Data Flow between Components

There can be two types of data flow between components:

  1. Parent component to Child Component
  2. Child component to Parent Component

We can send data from the parent component to the child component using props.

Child Component to Parent Component We can send data by emitting an event from the Child component and listen to it on the other end (Parent component).

Parent component to Child Component

As I mentioned that we can send data from the parent component to the child component using props.

Props are the way components can accept data from components that include them (parent components).

Accept multiple props

You can have multiple props by appending them to the array:

Set the prop type

You can specify the type of a prop by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

The valid types you can use are:

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

When a type mismatches, Vue alerts (in development mode) in the console with a warning.

Prop types can be more articulated.

You can allow multiple different value types:

Set a prop to be mandatory

You can require a prop to be mandatory:

Set the default value of a prop

You can specify a default value:

for object

You can even build a custom validator, which is cool for complex data:

Passing props to the component

You pass a prop to a component using the syntax

if what you pass is a static value.

If it’s a data property, you use

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

Child component to Parent Component

Child Component to Parent Component We can send data by emitting an event from the Child component and listen to it on the other end (Parent component).

Here is the syntax for the child component for the emitting events.

In this syntax, we need to be careful while giving a name to the event because using the same name; we will later listen to this event. In order to listen to this event, we can listen to it as we listen to a click event in Vue.js. For example

Example

The parent can intercept this using the v-on directive when including the component in its template:

You can pass parameters of course:

and retrieve them from the parent:

Keep watching this and follow us for more tech articles or you can reach out to me for any doubt and suggestions and the next blog in the series will be published soon.

Thanks

Happy Coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vrijraj Singh

Google Developer Expert for Web Technologies & Firebase | Developer Advocate | GDG Organizer for GDG Jalandhar