Components & Props

Everything so far has lived in one component. Real Vue apps are built from many small components, each with its own template and data, composed together — and props are how a parent hands data down to a child.

Defining a component

A component is defined the same way as the root app, then registered by name so it can be used as a custom tag in a template:

const app = Vue.createApp({})

app.component('user-card', {
  props: ['name', 'role'],
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <p>{{ role }}</p>
    </div>
  `
})

app.mount('#app')

<div id="app">
  <user-card name="Priya" role="Engineer"></user-card>
  <user-card name="Sam" role="Designer"></user-card>
</div>

Priya
Engineer

Sam
Designer

props: ['name', 'role'] declares that user-card accepts those two attributes from whoever uses it. Each <user-card> tag is a separate, independent instance — reusing the same component definition with different data.

Binding a prop to dynamic data

The examples above passed plain string attributes. To pass an actual reactive value from the parent's data, use : (the v-bind shorthand from earlier lessons) instead of a plain attribute:

<user-card
  v-for="user in users"
  :key="user.id"
  :name="user.name"
  :role="user.role"
></user-card>

Validating props

The array form (props: ['name', 'role']) works, but for anything beyond a quick example, the object form lets you specify types and mark props as required — Vue will warn in the console during development if they're violated:

props: {
  name: { type: String, required: true },
  role: { type: String, default: 'Team member' }
}