如何在 Vue.js 中获取从子组件到父组件的 json 收集的数据？

Question

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: [],

Answer 1

You can emit event for child for sending data:

 Vue.component('Child', { template: ` <div class=""> </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>