0👍
✅
The short answer to if the state of the parent component (or main Vue instance) can be changed from a child component, is no or at least it should not be done. It’s an anti-pattern and can produce bugs in your code.
But you have two choices here.
- To emit an event from child component, and handling it from parent. So the parent is responsible of changing its own state with its own logic.
When you need to change a value from the main instance from a child component, you emit the event, even with a value you can pass to the emit function, and you program your main instance to listen that event and respond accordingly.
More info here: listening to child component events. - To add a Vuex store to your app. In this way you abstract the state of the app that’s common to several components. So your child component could ask the store to change certain state.
More info here: Vuex
Using Vuex is more complex dough, if your app is simple I’d go with first option.
Source:stackexchange.com