如何将数据从子组件传递到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 $emit

Child component triggers clicked event:

export default {

  methods: {

    onClickButton (event) {

      this.$emit('clicked', 'someValue')

    }

  }

}

Parent component receive clicked event:

<div>

  <child @clicked="onClickChild"></child>

</div>

export default {

  methods: {

    onClickChild (value) {

      console.log(value) // someValue

    }

  }

}