Hack Frontend Community

What are Props in Vue?

Props are a way to pass data from parent component to child in Vue.js. They define component interface, making it reusable and configurable without hard binding to internal state.

Why Props?

  • Component decomposition. Extract logic and template into separate component, passing only necessary data.
  • Reusability. Same component can be used in different places with different prop values.
  • Interface clarity. By declaring props, you document component expectations and get static checking.

Declaring Props

Options API

export default {
  name: "UserCard",
  props: {
    // required, String type
    name: {
      type: String,
      required: true
    },
    // optional, Number type, default value
    age: {
      type: Number,
      default: 18
    },
    // simple validation
    isActive: {
      type: Boolean,
      validator: value => typeof value === "boolean"
    }
  }
};

Composition API

import { defineComponent } from "vue";

export default defineComponent({
  name: "UserCard",
  props: {
    name: { type: String, required: true },
    age: { type: Number, default: 18 },
    isActive: Boolean
  },
  setup(props) {
    // props.name, props.age, props.isActive available here
    return { props };
  }
});

Don't modify props inside component:

props are incoming data; for internal state use data or ref in Composition API.

Usage Example

<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Age: {{ age }}</p>
    <p v-if="isActive">Status: Active</p>
  </div>
</template>

<script>
export default {
  props: ["name", "age", "isActive"]
};
</script>

Note:

In Composition API you can destructure props immediately in setup: setup({ name, age, isActive }) { /* … */ }

Steps for Working with Props

1

1. Declare props

Define props property in component with type and rules (required, default, validator).

2

2. Pass values

In parent component use attributes: <UserCard name="John" :age="30" :isActive="true" />

3

3. Use inside

Access props as reactive variables: {{ name }}, {{ age }}.

Recommendations

  • Declare props explicitly (as object) to enable typing and validation.
  • Use default values for optional props.
  • If you need to transform incoming data, do it in computed properties (computed), not directly in props.

More in official Vue documentation: Vue Props Documentation