Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
- 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.
Download my free Vue Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020