Guides

Welcome

Getting Started

Introduction

Quick Start

Create an Application

Building

Props

Component Events

Slots

Component Registration

Last update in Jun 2023 - v1.0.0

OpenSpec™

Documentation

Get this Template

OpenSpec™

Documentation

Getting Started

Props

This page assumes you've already read the Components Basics. Read that first if you are new to components.

Watch a free video lesson on Spec School

Props Declaration

Spec components require explicit props declaration so that Spec knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in its dedicated section).

export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}

In addition to declaring props using an array of strings, we can also use the object syntax:

export default {
  props: {
    title: String,
    likes: Number
  }
}

For each property in the object declaration syntax, the key is the name of the prop, while the value should be the constructor function of the expected type.

This not only documents your component, but will also warn other developers using your component in the browser console if they pass the wrong type. We will discuss more details about prop validation further down this page.

Prop Passing Details

We declare long prop names using camelCase because this avoids having to use quotes when using them as property keys, and allows us to reference them directly in template expressions because they are valid JavaScript identifiers:

export default {
  props: {
    greetingMessage: String
  }
}

<span>{{ greetingMessage }}</span>

Technically, you can also use camelCase when passing props to a child component (except in DOM templates). However, the convention is using kebab-case in all cases to align with HTML attributes:

<MyComponent greeting-message="hello" />

We use PascalCase for component tags when possible because it improves template readability by differentiating Spec components from native elements. However, there isn't as much practical benefit in using camelCase when passing props, so we choose to follow each language's conventions.

Static vs. Dynamic Props

So far, you've seen props passed as static values, like in:

<BlogPost title="My journey with Spec" />

You've also seen props assigned dynamically with v-bind or its : shortcut, such as in:

<!-- Dynamically assign the value of a variable -->
<BlogPost :title="post.title" />

<!-- Dynamically assign the value of a complex expression -->
<BlogPost :title="post.title + ' by ' + post.author.name" />

Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc.) will not be available inside default or validator functions.

React Essentials

Building Your Application

TypeScript

Create an Application

Component Events