Vue.js Components Communication
How you can make components communicate in a Vue.js application.
- Props
- Events to communicate from children to parent
- Using an Event Bus to communicate between any component
- Alternatives
Components in Vue can communicate in various ways.
Props
The first way is using props.
Parents “pass down” data by adding arguments to the component declaration:
<template>
<div>
<Car color="green" />
</div>
</template>
<script>
import Car from './components/Car'
export default {
name: 'App',
components: {
Car
}
}
</script>
Props are one-way: from parent to child. Any time the parent changes the prop, the new value is sent to the child and rerendered.
The reverse is not true, and you should never mutate a prop inside the child component.
Using Events to communicate from children to parent
Events allow you to communicate from the children up to the parent:
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething')
}
}
}
</script>
The parent can intercept this using the v-on
directive when including the component in its template:
<template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- or -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleClickInParent: function() {
//...
}
}
}
</script>
You can pass parameters of course:
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething', param1, param2)
}
}
}
</script>
and retrieve them from the parent:
<template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- or -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleClickInParent: function(param1, param2) {
//...
}
}
}
</script>
Using an Event Bus to communicate between any component
Using events you’re not limited to child-parent relationships.
You can use the so-called Event Bus.
Above we used this.$emit
to emit an event on the component instance.
What we can do instead is to emit the event on a more generally accessible component.
this.$root
, the root component, is commonly used for this.
You can also create a Vue component dedicated to this job, and import it where you need.
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$root.$emit('clickedSomething')
}
}
}
</script>
Any other component can listen for this event. You can do so in the mounted
callback:
<script>
export default {
name: 'App',
mounted() {
this.$root.$on('clickedSomething', () => {
//...
})
}
}
</script>
Alternatives
This is what Vue provides out of the box.
When you outgrow this, you can look into Vuex or other 3rd party libraries.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X