Vuejs 2 Passing prop object to child component and retrieving - components

Question

I was wondering how to pass an object to a child component using props and retrieving. I understand how to do it as attributes but how to pass an object and retrieve the object from the child component? When I use this.props from the child component I get undefined or an error message.
Parent component
<template>
<div>
<child-component :v-bind="props"></child-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
mounted() {
},
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
},
methods: {
}
}
</script>
<style scoped>
</style>
Child component
<script>
<template>
<div>
</div>
</template>
export default {
name: 'ChildComponent',
mounted() {
console.log(this.props)
}
}
</script>

Answer 1

Simple as that:
Parent component:
<template>
<div>
<my-component :propObj="anObject"></my-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
mounted() { },
props: {
anObject: Object
},
components: {
ChildComponent
},
}
</script>
<style scoped>
</style>
Child component:
export default {
props: {
// type, required and default are optional, you can reduce it to 'options: Object'
propObj: { type: Object, required: false, default: {"test": "wow"}},
}
}
This should work!
Take a look at props docs also:
https://v2.vuejs.org/v2/guide/components.html#Props
If you want to sent data from the child to the parent as was already pointed in the comments you have to use events or take a look at 'sync' feature which is available in 2.3 +
https://v2.vuejs.org/v2/guide/components.html#sync-Modifier

Answer 2

Yo can use v-bind="object" to pass an object as props to child component, besides you can access props in template using $props, therefore the answer is:
Parent Component:
<template>
<div>
<child-component v-bind="$props"></child-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
}
}
</script>
Child Component:
<template>
<div>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['firstname', 'lastname', 'foo'],
mounted() {
console.log(this.$props)
}
}
</script>

Answer 3

Here's a simple solution for passing many props as an object into a component
Parent Component:
<template>
<div>
<!-- different ways to pass in props -->
<my-component v-bind="props"></my-component>
<my-component :firstname="props.firstname" :lastname="props.lastname" :foo="props.foo">
</my-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
}
}
</script>
Child Component:
<template>
<div>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['firstname', 'lastname', 'foo'],
mounted() {
console.log(this.props)
}
}
</script>