子组件给父组件传对象值,父组件如何接收
时间: 2024-01-07 15:22:39 浏览: 78
父组件可以通过props属性接收子组件传递的对象值。在父组件中,需要在子组件标签上使用v-bind指令将父组件的数据传递给子组件的props属性。然后,在子组件中,可以通过props属性来访问父组件传递的对象值。
以下是一个示例:
父组件:
```vue
<template>
<div>
<child-component :objValue="parentObj"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentObj: {
name: 'John',
age: 25
}
};
}
};
</script>
```
子组件:
```vue
<template>
<div>
<p>Name: {{ objValue.name }}</p>
<p>Age: {{ objValue.age }}</p>
</div>
</template>
<script>
export default {
props: {
objValue: {
type: Object,
required: true
}
}
};
</script>
```
在上面的示例中,父组件通过v-bind指令将parentObj对象传递给子组件的objValue属性。子组件通过props属性接收并访问父组件传递的对象值。
阅读全文