[Vuejs]-Vue.js – pass variable as property to nested child component

To do this you can use provide/inject. Your parent would provide data like this:

provide: {
    user: 'John Doe'
  }

And your nested child would use it like this:

inject: ['user']

Nethertheless you should really use Vuex for this.

I would have written this as a comment, but I don’t have enough "reputation".

As Mael pointet out in his/her comment, your posting does not contain a question. You are merely describing two (working) implementation patterns.

Assuming that you want to know which of it is a better choice I would say:

I’d prefer the "First way" as it’s cleaner and needs less code.

The "Second way" seems only be useful when you need to map the property to a different value for the SubChild.

But in this case I would not use watchers. Instead use a computed value that you can pass to the SubChild as a property.

Whenever the property given by the Parent is changed the computed value in the Child should be recalculated and thus trigger the SubChild re-render.

You shouldn’t pass it all you should have a callback function in the parent that can change the state in the parent. The only place you should actually have state is the parent.

Then you can pass this function as props as far down as you want (or as noted here provide/inject), this way you have 1 place you keep your state and 1 function that changes it. Any event that should change the state will call the callback and it will change at the parent level.