Javascript 如何在vue中将数据从子组件传递到父组件?

Javascript 如何在vue中将数据从子组件传递到父组件?,javascript,vue.js,Javascript,Vue.js,我正在使用Vue.Js,从父级多次调用我的子组件。这意味着为所有不同的调用创建了单独的实例。数据json将包含所有不同实例的单独值。 现在我想从父组件获取子组件所有实例中变量json中的数据 [Code] Parent component <div v-for="(value, index) in inputs" :key="index++"> <ChildComponent :componentcount="index" ></ChildComponen

我正在使用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:"",
  }
}
}

这回答了你的问题吗?
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
    }
  }
}