home / blog / Essentials

An Introduction to Vue3 Props - A Beginner’s Guide

Props are an essential part of any modern Javascript framework.

The ability to pass data between components is a fundamental element of Vue projects. In Vue3, the way we can access props inside a Vue component is a little different than before.

In this quick little article, we’ll go over this new change as well as take a look at the decisions behind the switch.

Alright, let’s jump right in!

Why is it important to use props?

First, we have to understand what props are. Props are custom attributes that we can register on a component that allow us to pass data from a parent component to one of its children.

Since props allow us to share data between components, it lets us organize our Vue projects and components into more modular components.

Let’s just jump into an example

Previously, a component’s props were just part of the this object and could simply be accessed by using this.propName.

However, one huge change in Vue3 is the introduction of the setup method.

This setup method, which you can learn more about here, now contains almost all of the code that used to be separated into different options like data, computed, watchers, etc. One major detail about this new method is that this does not have the properties that it used to in Vue2.

So how do we use Vue3 props without using this?

Luckily, it’s super simple. Our setup method actually takes two arguments

  • context – an object that exposes specific properties that used to be found on this

  • props – an object that contains a component’s props

As you might guess, this props argument is what we’re going to be using to access our props. All we have to do is props.propName – no more need for the this variable!

Our code might look something like this.

  setup (context, props) {
      // context has attrs, slots, and emit()
      console.log(props.propName) // access a prop to our component

Easy right!

Why do Vue3 props work differently than Vue2?

The main motivation behind the change in the way we access Vue3 props is to make it clearer this means in a component/method. Sometimes when looking at Vue2 code, it could be ambiguous what this was referring to.

A big goal for the Vue Team when designing Vue3 was to make it more scalable for large projects. Part of this was redesigning the Options API to the Composition API to allow for better code organization.

But by eliminating a majority of references to this and instead using explicit context and props variables, it would increase readability for large Vue projects.

If you want to learn more about the setup method and the main differences between Vue2 and Vue3, check out this article.

And there ya go!

As you can tell, Vue3 props work generally the same as Vue2, the main change is how we can access them inside our new setup method.

I hope that this quick little lesson will help make the transition to Vue3 a little bit easier.

If you have any questions, comments, or just want some Vue help, leave a comment down below. Happy coding!

Latest Posts

Top Tools

Getting Started with Vuex in Vue 3

Vuex is a state-management system following the Flux pattern that lets us create a global store with unidirectional data flow across our Vue 3 app.

Dev Tips

Improve Vue Performance with v-once + v-memo

Rendering performance is a vital metric for frontend developers. Improve your Vue app's performance with these two directives.

Top Tools

Making a Markdown-Based Blog with Vue and Gridsome

Use Vue with Gridsome is one of the easiest ways to create static websites from just Markdown files.

Top Tools

5 VueUse Library Functions That Can Speed Up Development

VueUse is an open-source project that provides Vue developers with a huge collection of essential Composition API utility functions for both Vue 2 and Vue 3.

Join the LearnVue Community

Every week we send out exclusive content to thousands of developers on our mailing list. 100% Free.