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

Question

我在子组件中有结果数据，但我应该把它带到主组件。

父组件中的主组件，因此每次单击按钮时，结果都应收集在主应用程序中

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

子组件数据在这里，我只需要在父组件中显示json格式的结果，结果是输入结果

 results: [],

Answer 1

您可以为孩子发出事件以发送数据：

 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>