Wie übergebe ich Eingabedaten einer untergeordneten Komponente an die übergeordnete Komponente und speichere sie im Array in Vue.js?

Question

** Wenn ich hier zum Beispiel auf die Schaltfläche klicke, erhalte ich eine weitere Komponente, was bedeutet, dass sie über neue Daten verfügt. Ich möchte also alle Informationen in einem Array sammeln, wenn die Schaltfläche „Daten speichern“ gedrückt wird, was hoffentlich der Fall ist leicht zu verstehen

<Child v-for="count in btnNumber" :key="count" @showData="getElements" />

<v-btn
  color="primary"
  elevation="10"
  class="space"
  large
  @click="duplicateEl"
  >Add Categ & Key</v-btn
>
v-btn
      color="secondary"
      elevation="13"
      class="btnEl"
      dark
      large
      @click="getResult"
      >Save Data</v-btn

** Es verwendet Emit, um die Daten von meiner untergeordneten Komponente abzurufen

methods:{
               getElements(emitPayload) {
              this.selectedChildCategory = emitPayload.selectedCateg;
              this.selectedChildKey = emitPayload.selectedKey;
              this.selectedChildLanguage = emitPayload.selectedLang;
              this.selectedChildContent = emitPayload.selectedCon;
        }
    }
 duplicateEl() {
  this.btnNumber++;
}

Answer 1

尝试将发出事件的数据（从获取元素）保存到新的数据变量数组，并使用该数组

Answer 2

您可以在父组件上保存数据，请查看以下代码片段：

Vue.component('Child', {
  template: `
  
    
      
        
          
          
          
          
          
          
          
          
          
          
        
      
    
  
  `,
  props: ['conte'],
  data() {
    return {
      content: this.conte,
      categories: ['first', 'second', 'third'],
      keys: [1,2,3],
      langs: ['g', 'h', 'j'],
      contents: ['aaa', 'bbb', 'ccc']
    }
  },
  methods: {
   setD() {
      this.$emit('show', this.content);
    },
  },
})

new Vue({
  vuetify: new Vuetify(),
  el: "#app",
  data() {
    return {
      contentFields: [{id: 0, cat: '', key: '', lang: '', cont: ''}],
      showData: false
    }
  },
  methods: {
    addInput() {
      let newI = this.contentFields.length 
      this.contentFields.push({id: newI, cat: '', key: '', lang: '', cont: ''})
    },
    getElements(e){
      const newData = this.contentFields.map(obj => {
        if(obj.id === e.id) 
           return { ...obj }
        return obj
      });
    },
    getResult() {
      this.showData = !this.showData
    }
  }
})

  
  [email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  [email protected]/dist/vuetify.min.css" rel="stylesheet">
  


  

    
      
        
          Add Categ & Key
          
            
          
          Save Data
          
{{ contentFields }}