This article summarizes how to use Vue props and the basic syntax.

What are Props?

In Vue.js, props are used to pass data from a parent component to a child component.

Short for "properties," props act as containers that automatically store values passed from the parent component to the child component.

Basic Syntax for Props

When using a prop named subtitle:

In the Parent Component

The child component is embedded, and data is passed to its props.

When passing data as a variable, use v-bind.

<div>
  <Children subtitle="Subtitle" />
</div>
<div>
  <Children :subtitle="subtitle" />
</div>

⇨ What is Vue's v-bind? Basic Usage

In the Child Component

When using Composition API (setup)

<template>
  <div>{{ subtitle }}</div>
</template>

<script setup>
  defineProps({
    subtitle: {
      type: String,
      default: "",
    },
  })
</script>

When using Option API (Vue 2)

<template>
  <div>{{ subtitle }}</div>
</template>
<script>
  export default {
    props: {
      // The prop named subtitle is received
      subtitle: {
        type: String,
        default: "",
      },
    },
  }
</script>

Explanation

In the Parent Component

Keep in mind that data flows from parent to child as you define the child component.

You pass the prop in the parent component by writing props=** where ** corresponds to the name specified in the child component.

In this case, the name is subtitle, which is why we use this syntax:

<Children subtitle="Subtitle" />

Prepare a Placeholder for the Data in the Child Component

In the child component, you need to define a prop with the appropriate name as a placeholder.

Note the difference in syntax between Vue2's Option API and Vue3's Composition API. Please check the basic examples for clarity.

<script setup>
  defineProps({
    subtitle: {
      type: String,
      default: "",
    },
  })
</script>

Using Multiple Props

<script setup>
  defineProps({
    subtitle: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  })
</script>

When Using Objects or Arrays

A more specific syntax is required for objects and arrays:

<script setup>
  defineProps({
    options: {
      type: Object,
      default: () => ({}), //
    },
    items: {
      type: Array,
      default: () => [],
    },
  })
</script>

Using default: {} would cause an error.

The reason for this is:

Difference between Primitive and Reference Types
Primitive types (e.g., String, Number, Boolean) store their values directly in the variable, so assigning the same value to separate variables does not affect each other.
Reference types (e.g., Object, Array) store a reference to the actual data instead of the data itself. Therefore, if the same object or array is shared across multiple components, changes in one will affect the others.

Using Props in the Template

<template>
  <p>{{ subtitle }}</p>
</template>

Using Props in the Script

With Composition API:

console.log(subtitle)

With Option API, this is necessary:

console.log(this.subtitle)

Final Code Example

Parent Component

<template>
  <div>
    <h1>Parent Component</h1>
    <Children subtitle="Subtitle" />
    <Children :subtitle="subtitle" />
  </div>
</template>

<script>
  import Children from "@/components/Children"
  export default {
    components: {
      Children,
    },
    data() {
      return {
        subtitle: "Subtitle 2",
      }
    },
  }
</script>

Child Component

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{subtitle}}</p>
  </div>
</template>

<script>
  export default {
    props: {
      subtitle: {
        type: String,
        default: "",
      },
    },
  }
</script>

Conclusion

This article summarized the basic syntax for using props in Vue.

With Vue2 and Vue3 coexisting, it can be a bit tricky.

I hope this helps!