10 – Props | Vue 3 e Composition API

Vue 3 introduced a new way to handle props with the Composition API. In this article, we will explore how to use props in Vue 3 using the Composition API.

1. Define props in setup

To define props in Vue 3 using the Composition API, you can use the `setup()` function. Inside the `setup()` function, you can define props as an object with their type and default value.


```
const MyComponent = {
props: {
message: {
type: String,
default: 'Hello, World!'
}
},

setup(props) {
console.log(props.message); // Output: Hello, World!
}
}
```


2. Pass props to components

To pass props to components in Vue 3, you can use the `v-bind` directive or the shorthand `:` syntax. For example:


```

```


3. Access props in the template

You can access props inside the template using the double curly braces syntax `{{}}`. For example:


```

```


4. Prop validation

In Vue 3, you can also perform prop validation using the `validator` function. This function should return `true` if the prop is valid, or `false` otherwise.


```
const MyComponent = {
props: {
message: {
type: String,
validator: value => value.length <= 10
}
},

setup(props) {
console.log(props.message); // Output: Hello
}
}
```


5. Pagination

In Vue 3, you can also use the `toRefs` function to create reactive references to props. This allows you to modify props directly without triggering a warning.


```
const MyComponent = {
props: {
currentPage: {
type: Number,
default: 1
}
},

currentPage.value = 2;
console.log(props.currentPage); // Output: 2
}
}
```