VueJs Component interaction: props and events

In this post we are going to see how to pass data from parent to child component and vice versa in VueJS. We will be using a small web app for showing the working of both these methods. working demo , github link, stack-overflow link.

Best way for passing data in front-ends like vuejs is to use state management like vuex or pinia which I will cover in my other posts, but sometimes we do not need them in small applications. In such cases we need to use props and events. Props for passing data from Parent to Child and Events for passing data from child to parent component.

Files and Components

We have 3 vue components here
Brew.vue - parent component, accesses breweries apis and passes to childs via props.
BrewList.vue - child component, shows list of breweries on left side
BrewMap.vue- child component, shows the breweries on map on right side.

Overall data flow

Props: Parent to child
We are accessing brewery list via an api parent component Brew.vue and passing it to child component BrewList.vue and BrewMap.vue . Brew.vue parent component is sending brew prop to BrewList.vue child. While passing the brewery list prop, we also added a parameter iconsize which will be used in BrewMap to show the icon on map.

We are accessing the props sent by parent component in child BrewList.vue and listing them in a table as below. we can also watch prop in child components using watcher and check the values.

Events: Parent to Child

Now comes the events part where are going to pass mouse over and mouse leave event information from BrewList.vue child to parent Brew.vue . So whenever we are entering mouse on BrewList.vue breweries names, it triggers these events and passes to Brew.vue parent.

Parent Brew.vue is accessing these events and attaching them to methods for changing the iconsize to large or normal which is visible on BrewMap.vue leaflet map.

Thank you.