Vuejs Props 101

In VueJS, props is powerful way to have communication between the parent and child components. This is the guide for anyone who wants to start with the vuejs' props.

All the example mentioned below are here: https://codepen.io/NehhaSharma/pen/zYYaWKM

1. What is the props?

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

2. prop casing

In Vuejs we can use the kabab case (hyphen separated words) and in DOM we can go ahead with the camelcase. There would not be an issue.

3. How to define props?

To define the props in the vuejs, we use the props keyword. In the below example we are having heading as the props. Note here, if we have only one prop we can drop the square brackets. We should use square brackets when we have multiple props to define.

4. Datatype of props

props can be of any data-type: String, Number, Boolean, Object, Array. It is good to practice to pass the data-type to the props you are expecting. We can use the type keyword to define the type of props we are expecting.

5. mandatory props

If you want to make props required then use the required keyword to set it value to true or false.

6. The default value of props

You can have the default value of the props by using the key default. When the value from the parent is missing the value in default prop will come in DOM

7. multiple props

As I have mentioned earlier, when you have multiple props, use a square bracket.

8.  static props & dynamic props

If it is the static value we can use the static props. The above-stated way will work but if the props are dynamic then we will use the dynamic props by using the v-bind.