Vue.js - pass variable as property to nested child component

Question

I have a question about passing variables to nested components.

I have 3 components:

Parent
Child
SubChild

and they have a shared variable (call it myVar).

Suppose I don't want to use Vuex. My question is what is a better way of passing myVar from Parent to SubChild.

First way

(In Parent) I am passing myVar to Child by props option. (it's common).
(In Child) I am passing the prop option myVar directly to SubChild as its prop option.

Second way

(In Parent) I am passing myvar to Child by props option. (it's common).
(In Child) I am cloning the prop option myVar to local variable (call it myLocalVar) and passing the cloned variable myLocalVar to SubChild as its prop option.

I prefer the second way, but I have to create watches

To handle changes from Parent to myLocalVar.
To handle changes from Child to emit it to Parent.

I don't see where the question of your question is, but, if your aplication grows, it's better to use Vuex. Other than that the first way looks more clean, but can be dificult to watch the changes and pass it to parents/childs. — m4el
– m4el, Commented Aug 30, 2021 at 12:25
imo you should use vuex, or create a mixin that has a Vue.observable object in data, then all which import the mixin would have a shared object, props are for component options not data, both your options will bloat the components with input/output logic for the prop — Lawrence Cherone
– Lawrence Cherone, Commented Aug 30, 2021 at 12:25

StevenSiebert · Accepted Answer · 2021-08-30 13:05:16Z

2

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.

answered Aug 30, 2021 at 13:05

StevenSiebert

1,4645 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jadawin · Accepted Answer · 2021-08-30 13:28:30Z

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.

Michael · Accepted Answer · 2021-08-30 13:32:54Z

1

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.

answered Aug 30, 2021 at 13:32

Michael

5,1488 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

Vue.js - pass variable as property to nested child component

First way

Second way

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

First way

Second way

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related