Interaction between parent and child components

As v2 guide claims, this is the preferred way of doing communication between parent-child:

Let's say we have this structure:

<task-list>
    <task v-for="task in list" v-bind:task="task"></task>
</task-list>

Task component gets the task object by props, but how should it inform the parent about the intended changes to the prop? In Angular world, it was ok for the child to directly manipulate the data passed to it, so I'm not sure how the Vue way should look like.

Any tips or sample codes would be highly appreciated! :)

donpuerto

9 years ago

Level 4

Im not going to give you a code but a walkthrough maybe. Here i is.

Passing objects/string from parent to child you can use props. Aside from that there also validation. You can check that on the documentation.
Passing objects/string from child to parent (3 ways) 1. using $on and $emit, 2. using bus $on and $emit, 3) Vuex

using $on and $emit

<div id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment="incrementTotal"></button-counter>
 <button-counter v-on:increment="incrementTotal"></button-counter>
</div

Vue.component('button-counter', {
 template: '<button v-on:click="increment">{{ counter }}</button>',
 data: function () {
   return {
     counter: 0
   }
 },
 methods: {
   increment: function () {
     this.counter += 1
     this.$emit('increment')
   }
 },
})
new Vue({
 el: '#counter-event-example',
 data: {
   total: 0
 },
 methods: {
   incrementTotal: function () {
     this.total += 1
   }
 }
})

CodingFrisson

9 years ago

Level 3

Thanks for the example. In this case, it makes perfect sense and the execution is clean. But what if 'button-counter' component wanted to change the object passed to it by the parent? According to the guidelines, the child shouldn't directly manipulate the passed object. Should it be something like that, even if it feels a little wrong?

this.$emit('changeIt', [localCopy, originalOb]);
...
this.$on('changeIt',  function (localCopy, originalOb) {
  originalOb.prop1 = localCopy.prop1;
})

Please or to participate in this conversation.