Javascript 如何在vue中将数据从子组件传递到父组件?
我正在使用Vue.Js,从父级多次调用我的子组件。这意味着为所有不同的调用创建了单独的实例。数据json将包含所有不同实例的单独值。 现在我想从父组件获取子组件所有实例中变量json中的数据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
[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
}
}
}