How to pass multiple input values from CHILD Component to Parent component in Vue?

Question

** Anyone has idea how to pass child component multiple. input values **

<template>
  <div>
    <v-row align="center">
      <v-select
        :items="languages"
        v-model="selectedOption"
        @input="changeLanguage()"
        outlined
        solo
        class="m-3"
        cols="12"
        sm="2"
        label="Select Language"
      ></v-select>

      <v-combobox
        @input-content="changeContent()"
        v-model="contents2"
        outlined
        solo
        class="d-inline-flex"
        cols="12"
        sm="2"
        label="Input Content"
      ></v-combobox>
    </v-row>
  </div>
</template>

** My Template folder above, please feel free to ask more source code from me **

 <Child
        v-for="count in sec"
        :key="count"
        v-model="selectedLanguage"
        :languages="languages"
        :contents="contents"
        :input="onChangeChild"
        :inputContent="onChangeContent"
      />

** Here is my Parent component source code **

Answer 1

Seems like you already know what you want and what you need. And have the skills to enhance your approach to solve the problem.

Properties by parent can be used as v-model on your deeper components.

You can also split your component into multiple if you need to thoroughly manage some values. If that would not cost you more testing or any other resources.

When you use emit as a channel to communicate with parent component. Always try to remember that the payload you emit can be extended and designed however you want/need. For example:

this.emit("updateMultiple", {
var: complexObject
anotherVar: moreComplexObject
})

Then you can manage the emits in detailed manner within a method breaking down the payload to your task need.

<input @updateMultiple="advancedFunction">

At the methods:

advancedFunction(emitPayload) {
const inputOne = emitPayload.var
const inputTwo = emitPayload.anotherVar
//...further logic
},

Finally you can manage emits based on when you want to trigger them within your child components.