Passing Props

Props in the context of Vue.js are fields, defined in a child component, that are accessible on that component's instance (this) and in the component's template.

The value of a prop depends on what the parent passes in its template to the child component at render time.

Defining a Simple Component That Takes Props

Let's look at a simple Hello single-file component. This can be found in a ./src/components/Hello.vue file (in a Vue CLI-generated project). Note how the who value is set in the props array and that it is interpolated as a value using {{ who }}. The props property of a Vue.js component can be an array of strings or an object literal.

When a value is defined in props, it is then accessible as an instance variable in the template section of the Vue.js component:

<template>
  <div>
    <h1>Hello {{ who }}</h1>
  </div>
</template>
<script>
export...