First Look on Vue3 Props

Many web developer and apps developer can agree with us that 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 the latest Vue3, there are a few differences on the way we can access props inside a Vue component. In this article, we’ll cover this new change as well as take a look at the decisions behind the switch.

Alright, let’s Start!

Why we suggest you use props? To answer it, first we have to understand what props are. Props are custom attributes that allow us to pass data from a parent component to one of its children when registered on a component. As result of that data transfer ability, we can organize our Vue projects and components into more modular components.

Let’s just jump into an example

In the previous version, 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.

All of the code that used to be separated into different options like computed, data, watchers, etc. now contained in this setup method. One major detail about this new method is that `this` does not have the properties that it used to in Vue2.

Luckily, the way we use Vue3 props without ‘this’ is super simple. The new setup method actually takes two arguments

1. context – an object that exposes specific properties that used to be found on `this`
2. props – an object that contains a component’s props

This argument is the only argument we’re going to use in order to access our props. All we have to do is props.propName – we don’t need to use ‘this’ variable!

Why Vue change the way props work in Vue3? The main reason is to make it clearer `this` means in a component/method. In Vue2 ‘this’ cause ambiguity in what it refers to.

Making Vue to be more scalable for larger projects is the goal when Vue Team designing Vue3. In order to achieve that goal, the team decided to redesign the Options API to the Composition API. So, it results in better code organization.

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. We hope that this quick little lesson will help make the transition to Vue3 a little bit easier.