Prop Name Casing
- We have different types of conventions for writing the names of props such as camelCasel, kebab-case, PascalCase, etc. We generally use camelCase to long prop name because it allows us to directly reference them in dom because they are valid JavaScript identifiers.
props : { newProp1 : String // cameCase example }
- We can use the Kebab case to pass the details of the props to the component.
<Student student-name='Sam Snehil' />
- We use PascalCase for component tags which differentiates the component tag from the native tag which helps readers to understand the code.
<StudentClass /> // component tag
Vue.js Prop Passing Details
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:
Table of Content
- Prop Name Casing
- static vs. Dynamic Props
- Passing different values
- Binding Multiple Properties Using an Object
We will explore the above-mentioned Props in Vue.js in detail, along with understanding their basic implementation through the illustration.