0👍
yes you can call methods up/down of parent/child components. You may need to look at creating custom events and listen for them.
Another option I believe might be less complex is to consider using Vuex.
All of your addWidth
and subWidth
logic will reside in a centralized place this way. All of your components–no matter how nested can "subscribe" to these things (and modify them if needed).
Check out actions. You’ll dispatch an action addWidth
which sends it to Vuex. In your component that is responsible for rendering the stamina bar I would use a computed property to watch for updates. Something like this:
computed: {
barWidth() {
return this.$store.getters["bar/width"]; // 20
}
}
That is just a really rough example and will not likely be what you’re looking for.
VueSchool has some nice (free) courses to help get you rolling with Vuex as well.