CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
hayaa
hayaa

Reputation: 33

what props are used for in vuejs

I came across this snippet of code:

  props: {
    clicks: {
      type: Object,
      default: null,
    }
    events: {
      type: Object,
      default: null,
    },
  }

I didn't understand from where props are retreived, from database ? or received from another component ?

Upvotes: 1

Views: 668

Answers (3)

Anthony Bird
Anthony Bird

Reputation: 225

In Vue Props are declared in the component script. They are passed from a parent component down to child component.

Here is an example of a Child Component accepting the value of username being passed from its parent component:

<template>
 <div>
   {{username}}
 </div>
</template>
 
<script>
export default {
 props: ['username']
}
</script>

Here is the Parent Component passing the "username" prop using a static variable:

<child-component-name username='John Smith' />

In many cases the parent component will bind and object making it dynamic. Here is the whole Parent Component Prop passing "username" to child with this example:

<template>
 <div>
   <child-component-name :username="user.username" />
 </div>
</template>
 
<script>
import child-component-name from "@/components/ChildComponent.vue";
 
export default {
 components: {
   child-component-name
 },
 data() {
   return {
     user: {
       username: 'John Smith'
     }
   }
 }
}
</script>

In your example the parent component is used to count the clicks and events then passes the values to the child component like the following:

<child-component-name :clicks="yourClicks" :events="yourEvents" />

Upvotes: 4

Nitheesh
Nitheesh

Reputation: 19986

In Vue, props (or properties), are the way that we pass data from a parent component down to it's child components.

This is specifically used to share data from its immediate parent to the child.

In youe case, your parent component template will be something like.

<template>
    <div>
        <child-component-name :clicks="myClickObject" :events="myEventsObject">
        </child-component-name>
    </div>
</template>

Where myClickObject and myEventsObject are objects defined in your immediate parent component from which child-component-name has been called.

Upvotes: 0

IVO GELOV
IVO GELOV

Reputation: 14259

The props in Vue components always come from the immediate parent component.

Upvotes: 0

Related Questions