It will cause a mess, you are correct. This is one of the problems that vuex solves.
So how do you decide whether to pass props or use vuex? When i say use vuex, i mean to access the store data directly from the component that needs it. The trick is to consider each piece of data’s relationship to the overall application.
Data that is used repeatedly throughout the page, down many DOM hierarchies, in different pages, etc, is the ideal case in which to use vuex.
On the other hand, some components are so tightly coupled that passing props is the obvious solution. For example, you have a list-container
component, whose direct child is the list
component, and both of them need the same list data. In this situation, i would pass the list data down to the list
component as a prop.
You may be interested in the instance property $attrs
https://v2.vuejs.org/v2/api/#vm-attrs
along with it’s sibling option inheritAttrs
.
https://v2.vuejs.org/v2/api/#inheritAttrs
Using these 2 in combination allows you to pass props down multiple component levels with less boilerplate code.