Passing different values

We can pass all possible data types to props. Some of them are:

• Number:

<Student Age=23 /> // Static 
<Student :Age='age' /> // Dynamic

• String:

<Student name='Same  /> // Static 
<Student :name='name' /> // Dynamic

• Boolean:

<Student StudentPass='false' />
<Student :StudentPass="stud1.pass" />

• Array:

<Student student-marks='[89, 38, 83]' />
<Student :student-marks="stud1.marks" />

• Objects :

<Students student1="{ name: 'sam', age: '23' }" /> 
<Students :student1="students.stud1" />

Vue.js Props are used to pass data to the component. For passing details to props we have to first declare props. To declare the prop name we choose a name that is more descriptive of the value that it holds. In this article, we will see the Prop passing the details in Vue.js. The following are the different properties of the prop:

We will explore the above-mentioned Props in Vue.js in detail, along with understanding their basic implementation through the illustration.