How can I get json collected data from child to parent component in Vue.js?-CodePudding

I have results data in child component but I should bring it to main component.

Main Component in Parent, so each time I click the button, the result should be gathered in main app

 <button @click="showFinalResult">Click me</button>

Child component data here and I just need to show results in json format in parent, the results are input results

 results: [],

CodePudding user response：

You can emit event for child for sending data:

Vue.component('Child', {
  template: `
    <div >
      
    </div>
  `,
  data() {
    return {
      results: [1,2,3]
    }
  },
  mounted() {
    this.$emit('update', this.results);
  }
})

new Vue({
  el: '#demo',
  data() {
    return {
      res: [],
      show: false
    }
  },
  methods: {
    getResult(res) {
      this.res = res
    },
    showResults() {
      this.show = !this.show
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button @click="showResults">Click me</button>
  <p v-if="show">{{ res }}</p>
  <child @update="getResult" />
</div>