What are Props and How to Use Them in Vue.js

Props are custom attributes that can be passed to a child component from a parent component.

They are a way of communication between components (one of the most common), in this case, exclusively “top down.”

Props allow the child component to receive data and use it in its logic or template. This enables us to create more reusable components.

Props are read-only, meaning that the child component cannot modify them directly. In other words, they are not used for the child component to send information to the parent.

How to Define and Use Props

To define props in a child component, we use the defineProps function in the Composition API. This function returns an object with the props that the component can receive.

<template>
  <div>
    <p>Message received: {{ message }}</p>
  </div>
</template>

<script setup>
// Define the props that the component can receive
const props = defineProps(['title'])
</script>

<template>
  <div>
    <ChildComponent message="Hello from the parent" />
  </div>
</template>

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

Props with Types

It is very common to define the expected data type for each prop. This helps avoid errors and improves code maintainability.

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <p>Is student?: {{ isStudent ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  name: String,       // String type prop
  age: Number,        // Number type prop
  isStudent: Boolean, // Boolean type prop
});
</script>

<template>
  <div>
    <ChildComponent name="Juan" :age="25" :isStudent="true" />
  </div>
</template>

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

Props with Default Values

It is also possible to define default values for props. If the parent component does not provide them, the prop will have the default value.

<script setup>
const props = defineProps({
  name: {
    type: String,
    default: 'Guest', // Default value
  },
  age: {
    type: Number,
    default: 18, // Default value
  },
});
</script>

Required Props

It is possible to mark a prop as required, which means that the parent component must provide it.

const props = defineProps({
  name: {
    type: String,
    required: true, // Required prop
  },
});

Two-Way Communication with v-model Advanced

Although props are one-way, you can achieve two-way communication using v-model.

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script setup>
defineProps({
  modelValue: String, // Prop for v-model
});

defineEmits(['update:modelValue']); // Emit the event to update the value
</script>

<template>
  <div>
    <InputComponent v-model="inputValue" />
    <p>Current value: {{ inputValue }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import InputComponent from './InputComponent.vue';

const inputValue = ref('');
</script>