Pass data from child to parent in Vuejs (is it so complicated?)

Question

Thanks for reading my question.

I have read about it:

vuejs update parent data from child component

https://forum.vuejs.org/t/passing-data-back-to-parent/1201/2

The concept is the same, I need to pass a data object from child to parent. I have used $emit to pass data to parent component but it doesn't works. Do you know what is wrong? You can check my code here:

Thanks in advance.

Answer 1

Props are for parent -> child

You can use $emit for child -> parent

v-on directive captures the child components events that is emitted by $emit

Child component triggers clicked event :

export default {
   methods: {
     onClickButton (event) {
         this.$emit('clicked', 'someValue')
     }
   }
}

---

Parent component receive clicked event:

<div>
    <child @clicked="onClickChild"></child>
</div>

...

export default {
  methods: {
      onClickChild (value) {
          console.log(value) // someValue
      }
  }
}

.