what props are used for in vuejs

user_17597690 0
Viewed 104

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 ?

vuejs2 vue-component vue.js javascript
3 Answers

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" />
user_44107460

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

user_59628020

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.

user_60993270
Related