If you need to pass the state across multiple components, there are various methods to achieve this goal. Here are three recommendations:
Centralized State management
To simplify handling of states, consider using a centralized state management tool like vuex: https://github.com/vuejs/vuex
This is especially beneficial for larger applications where passing the state through several component levels is required. It enhances efficiency and organization.
Property binding
A fundamental way to communicate with child components is through property binding. However, managing communication across multiple levels can become complex.
In such cases, you would include counter in the props array of both child components as follows:
foodList.vue (1. Level Child Component)
export default {
props:['foods','reset', 'counter'],
// ... your stuff
}
Include the component like this:
<foodList :counter="counter"></foodList>
addToCart.vue (2. Level Child Component)
export default {
props:['food','reset', 'counter'],
// ... your stuff
}
Finally, include the component like this:
<addToCart :reset="reset" :counter="counter"></addToCart>
Specify counter in the data object of your root component, then update it on a specific event. The state will trickle down.
App.vue
data() {
return {
// ... your stuff
counter: 0,
};
},
methods: {
emptyCart:function(){
// ... your stuff
this.counter = 0; // reset the counter from your parent component
}
}
Event Bus
For another option, utilize Vue's event bus. This is suitable for applications that become too intricate for simple property binding but are not extensive enough to warrant Centralized State management.
To begin, create a file named event-bus.js and add the following code:
import Vue from 'vue';
export const EventBus = new Vue();
You can then trigger events from the parent Component as shown below:
App.vue
import { EventBus } from './event-bus.js'; // check the path
export default {
// ... your stuff
methods: {
emptyCart:function(){
// ... your stuff
EventBus.$emit('counter-changed', 0); // trigger counter-changed event
}
}
}
Subsequently, listen for the counter-changed event in your child component.
addToCart.vue
import { EventBus } from './event-bus.js';
export default {
// ... your stuff
created() {
EventBus.$on('counter-changed', newCounter => {
this.counter = newCounter;
});
}
}
Explore more about the event bus here: https://alligator.io/vuejs/global-event-bus/