Binding and custom event triggering on multiple level in VUE.JS

Question

I am new in VUE.JS but i have finished some beginner courses of vuemastery. Though I know how to bind properties and how to emit custom events, I have a problem: I don't know how to make these things through multiple levels of components.

Let's say we have the following hierarchy:

I need to have control on the Home component's properties from the Elements and Input components from the bottom of the diagram. Right now I am emitting custom events from level to level from down to up, but it doesn't look like an elegant solution.

Is there a better way to do this? And of course when I change one of the properties from Input component it need to have effect on the properties in the Element components as well.

For example the Element components are

elements having width and height calculated based on totalWidth property, which can be edited in the Input component. I'm having here a warn as well in the console: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Nikola Kirincic · Accepted Answer · 2019-03-03 08:53:42Z

1

Use this.$root.$emit to emit event on the root component, that would then propagate event on its child components, regardless of depth level

answered Mar 3, 2019 at 8:53

Nikola Kirincic

3,7871 gold badge28 silver badges32 bronze badges

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

1 Comment

Ervin Over a year ago

Thanks niklaz! Your suggestion is what I was looking for. I had to look it up how to catch the event, and for others looking for this problem I will paste the pair of emit and catch parts: this.$root.$emit('clickedSomething') You can catch it anywhere in your app (I used the mounted moment ): this.$root.$on('clickedSomething', () => { //... }) Niklaz, could you please specify these in you answer so it would be displayed in a proper code format?

iacobalin · Accepted Answer · 2019-03-03 08:56:10Z

1

I would recommend using vuex to manage the state of your application. Emitting events all over the place is not the most elegant solution.

answered Mar 3, 2019 at 8:56

iacobalin

6083 silver badges10 bronze badges

Collectives™ on Stack Overflow

Binding and custom event triggering on multiple level in VUE.JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related