Props

Props are custom attributes you can register on a component. They let you pass data from a parent to a child component.

Props are one-way: data flows from parent to child. The child should not mutate the prop directly.

Declaring Props

You can declare props as an array of strings or as an object with validation options.

// Simple array syntax
export default {
  props: ['title', 'count']
}

// Object syntax with validation
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  }
}

Passing Props

<ChildComponent title="Hello" :count="5" />

Prop Validation

• type: Specify the expected type (String, Number, Boolean, Array, Object, etc.).
• required: Mark the prop as required.
• default: Provide a default value.
• validator: Custom validation function.

Notes

• Props are read-only in the child. To modify, emit an event to the parent or use a local copy.
• Use defineProps in <script setup> for Vue 3 Composition API.

// Vue 3 <script setup>
const props = defineProps(["title", "count"]);

Further Reading

• Vue Props Guide