vue: passing props down to all descendants

Question

I have a parent component with the following line

Answer 1

Solution possible from Vue 2.2.0

provide / inject

This pair of options are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.

https://fr.vuejs.org/v2/api/index.html#provide-inject

Answer 2

Vue $attrs is the new way to propagate props

From the Docs:

vm.$attrs

Contains parent-scope attribute bindings (except for class and style) that are not recognized (and extracted) as props. When a component doesn’t have any declared props, this essentially contains all parent-scope bindings (except for class and style), and can be passed down to an inner component via v-bind="$attrs" - useful when creating higher-order components.

For more information, see Vue.js API Reference - $attrs

Answer 3

for vue > 2.0

v-bind="$attrs" it's sufficient, or you can declare them at data(), with [this.$attrs]

Answer 4

You have to declare the props and bind them to pass them to the child. Have a look at https://vuejs.org/v2/api/#v-bind for available options

specifically, this may be of interest

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- but you can also... -->
<div v-bind="allProps"></div>

This means you can pass down the object, and have the child parse the appropriate props. This means that the child has to have the props defined in order to catch them. So what you may be able to do is, in the case of the parent, have :propBag="propBag" and inside edit, pass down v-bind="propBag", and that will use the correct props at the child level

Answer 5

Have you looked at vuex. It's really quite easy to use and allows you to store data for your entire app in a single data store. This means you don't have to keep passing data through props, you can just access variables set in the store.

Here is a link to vuex docs (What is Vuex) https://vuex.vuejs.org

Answer 6

You must pass all data via props to children components. You don't have to pass it as an object but Vue.js does require all data to be passed to children. From their documentation:

Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.

So you are doing it in the correct manner. You don't have to create an object, you are able to pass as many props as you would like but you do have to pass the from each parent to each child even if the parent is a child of the original "parent".