Vuejs 2 Passing prop object to child component and retrieving

12
votes

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>
2
componentsvuejs2
1) You aren't defining your props correctly on you parent component. 2) You can't pass your parent component's props via v-bind="props". 3) If you are passing an object of props values to the child component via v-bind you still need to define those props in the child components. 4) "Retrieving" data from a child component is done via events. 5) Please read the documentation on Vue components – thanksd
I don't need to use v-bind. I got that from an example and try to use it. I'm looking for the correct way to achieve this. I'm looking over the Vue components doc now – icode

2 Answers

21
votes

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://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://vuejs.org/v2/guide/components.html#sync-Modifier

0
votes

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>