[Vuejs]-Passing data from Child to Parent using only Javascript on VueJS

by

-1👍

That’s how you can pass data from child to parent:

Vue.component('child-component', {
  template: 
  `<button type="button" @click="emitClick">
    Click to emit event to parent component
   </button>`,
  
  methods: {
    emitClick() {
       this.$emit('buttonClicked', 'Magic from child component!');
     },
  },
});

Vue.component('parent-component', {
  template:
    `<div>
      <div>Child data is: {{ childData }}</div>
      <child-component @buttonClicked="handleClick" />
     </div>`,
  
  data() {
    return {
      childData: 'empty',
    };
  },
  
  methods: {
    handleClick(data) {
      this.childData = data;
    },
  },
});

new Vue({
  el: '#app',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <parent-component />
</div>

Leave a comment