Passing props

Props in the context of Vue are fields defined in a child component 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 accepts props

Let’s look at a simple HelloWorld single-file component. You can find this at ./src/components/HelloWorld.vue, generated automatically when you create a Vue project with Vite.

Note how the msg value is set in the props array and that it is interpolated as a value using {{ msg }}.

The props property of a Vue component can be an array of strings or an object literal, each property field of which is a component’s prop definition.

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

<template>
  <div class="hello">
 ...