Skip to content Skip to sidebar Skip to footer

How To Pass Data From Child To Parent Component In Vue?

I am using Vue.Js where i am calling my child component multiple times from parent. Which means there are separate instance created for all the different call. Data 'json' will con

Solution 1:

You can use $emit method for this purpose.
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
    }
  }
}

Post a Comment for "How To Pass Data From Child To Parent Component In Vue?"