如何将数据从子组件传递到vue中的父组件？

Question

我正在使用 Vue.Js，我从父级多次调用我的子组件。这意味着为所有不同的调用创建了单独的实例。数据“json”将包含所有不同实例的单独值。现在我想从父组件的所有子组件实例中获取变量 json 中存在的数据。

[Code]

Parent component

<div v-for="(value, index) in inputs" :key="index++">

     <ChildComponent :componentcount="index" ></ChildComponent>

</div>

Child Component

<template>

    <div id="hello">

        <div>

            <v-text-field :id="'ComponentHeader_' + $attrs.componentcount" v-model="header" 

                 class="headertag" label="Child Tag" @change="createJson" outlined>

            </v-text-field>       

      </div>

    </div>

</template>

<script>

export default {

    data(){

        return{

          json:"",

  }

}

}

Answer 1

You can use $emit method for this purpose.v-on directive captures the child components events that is emitted by $emitChild component triggers clicked event:export default {&nbsp; methods: {&nbsp; &nbsp; onClickButton (event) {&nbsp; &nbsp; &nbsp; this.$emit('clicked', 'someValue')&nbsp; &nbsp; }&nbsp; }}Parent component receive clicked event:<div>&nbsp; <child @clicked="onClickChild"></child></div>export default {&nbsp; methods: {&nbsp; &nbsp; onClickChild (value) {&nbsp; &nbsp; &nbsp; console.log(value) // someValue&nbsp; &nbsp; }&nbsp; }}