Vue2 mutating data from nested component

Question

From the Vue guide Composing Components, instead of mutating the data in a child component, an event should be emitted to parent component/instance to do the mutation. However, Vue's event can only propagate up one level. For nested components, my current implementation is like below:

When the client does an action in grandchild component

=> grandchild component has a method to emit an event to child component

=> child component has a method to re-emit the event to parent component

=> parent component has a method to mutate the data

This type of implementation is very tedious when nested components have more nesting.

Can someone tell me if this implementation is usual for nested components? However, this is really tedious and hard to maintain. If no, what implementation is not anti-pattern to Vue and also easy to maintain?

When you have too many nested components, then you can consider using vuex — Vamsi Krishna
– Vamsi Krishna, Commented Jun 2, 2017 at 9:43

larsemil · Accepted Answer · 2017-06-02 09:15:13Z

2

To handle this I usually setup another instance of Vue to act as an eventhub.

first in your main js file:

window.eventHub = new Vue();

and then in the components:

//component emitting event:
eventHub.$emit('shout', this.target);


//component listening to event
eventHub.$on('shout', function(){alert("EVENT EVENT");});

answered Jun 2, 2017 at 9:15

larsemil

8969 silver badges16 bronze badges

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

1 Comment

Linus Borg Over a year ago

Sidenote: When advising an Event Hub (which I personally rarely do), please always make people aware that they have to use $offto unregister their callbacks when the component is destroyed

tony19 · Accepted Answer · 2022-07-16 01:38:34Z

When applications increase in complexity, one of the common ways to manage the situation is to turn to a state management system.

Here is an example of a very basic state management system.

const store = {
  state:{
    message: "Hello World"
  },
  changeMessage(newMessage){
      this.state.message = newMessage               
  }
}

Vue.component("grand-child",{
  template:`
    <div><button @click="sayHello">Say Hello</button></div>
  `,
  methods:{
    sayHello(){
      store.changeMessage("Hello from grand child!")
    }
  }
})

Vue.component("child", {
  template: `
    <grand-child></grand-child>
  `
})

new Vue({
  el:"#app",
  data:{
    state: store.state
  }
})

And here is an example of it working. The basic idea is you offload the management of state to an external entity, and your Vue code becomes primarily about rendering the state and telling the state management system about actions from the user or changes that need to be made. The documentation talks about this kind of system here.

You can go a long way with a home grown solution, but often projects grow in complexity to require a more formal method of state management, which is where the Vue ecosystem offers Vuex.

Personally I don't often find the need for the complexity that comes along with Vuex, but you might and many others do.

Collectives™ on Stack Overflow

Vue2 mutating data from nested component

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