Props in Vue.js

1. What Are Props in Vue.js?

Props (short for "properties") are custom attributes that a parent component can pass to its child components. These props allow the child component to receive data from the parent and use it within its template or logic. Props are a key feature in making Vue components dynamic and reusable.

Key Characteristics of Props:

They are passed from parent components to child components.
Props are immutable in the child component — meaning the child cannot modify the props directly.
The child component can use props to display data or bind them to other elements.

2. How to Define Props in Vue.js

Props are defined in the child component using the props option. You can specify props either as an array or as an object to include more advanced validation and default values.

Basic Prop Definition (Array Syntax)

In the simplest form, props are defined as an array containing the prop names:

<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  props: ['title']
};
</script>

3. How to Pass Props from Parent to Child

In the parent component, props are passed to child components using custom attributes. The name of the attribute corresponds to the prop name in the child.

Example of Passing Props from Parent to Child:

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :title="parentTitle" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: 'Hello from Parent!'
    };
  }
};
</script>

4. Validating Props in Vue.js

You can validate the props by specifying their type or adding default values. Props validation helps ensure that the data passed to the child component is correct and matches the expected format.

Prop Validation Example:

<template>
  <div>
    <p>{{ name }} is {{ age }} years old.</p>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 30
    }
  }
};
</script>

Explanation:

type: Ensures that the prop matches the specified data type (e.g., String, Number, Boolean).
required: Ensures that the prop must be passed by the parent component.
default: Provides a default value if the parent component does not pass the prop.

5. Using Dynamic Props

In Vue.js, you can bind props dynamically using the v-bind directive. This is useful when the prop value is calculated or fetched from an external source.

Example of Binding Props Dynamically:

<template>
  <div>
    <ChildComponent :title="dynamicTitle" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicTitle: 'Dynamic Title from Parent'
    };
  }
};
</script>

6. Handling Props in the Child Component

In the child component, you can use the props in the template, computed properties, methods, and other parts of the component. You cannot modify the props directly, but you can use them to generate derived data or trigger actions.

Example of Using Props in the Child Component:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: ['title'],
  computed: {
    message() {
      return `Message from Parent: ${this.title}`;
    }
  }
};
</script>

7. Summary of Key Points:

Props allow data to flow from a parent component to a child component in Vue.js.
Props are immutable in the child, meaning the child cannot modify the passed data directly.
Props can be validated by defining types, marking them as required, or providing default values.
Dynamic props can be passed using v-bind, which makes them reactive.
Props are commonly used for passing configuration, data, or methods between components.

8. Conclusion

Props in Vue.js are an essential feature for creating dynamic, reusable, and maintainable components. By passing data from a parent to a child, you enable components to be modular and flexible. Understanding how to define, validate, and use props will significantly enhance your ability to build powerful Vue applications.

Whether you’re working on a small project or a large-scale app, props make it easy to manage data flow between components and keep your codebase clean and organized.

VUE