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

Question

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

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

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

这里是子组件数据，我只需要在parent中以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>