Vue.js gives Props concepts

Hello! Props are one of the most needed parts of Vue.js, they allow the exchange of information between components. Using props is done inside the setup function. Below are the props we can see in detail how to work with:

Defining Props : The defineProps function is used to define props in Vue.js . The defineProps object is used to define the types and properties of props.

import { defineProps } from 'vue'

// Props-larni aniqlash const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } })

Here the props object defines the title and message props. title prop type is String and required (required: true), and message has String type and default value (Default message).

Using Props : The props defined by the defineProps function can be placed directly in the in or can be used in

const props = defineProps({ title: { type: String, required: true }, message: { type: String, default: 'Default message' } })

// Props-larni ishlatish console.log(props.title) console.log(props.message)

props type and validation : defineProps can be used to define the types and validation of props. In Vue 3 we can provide types for validation, for example String, Number, Boolean, Array, Object ...

const props = defineProps({ id: { type: Number, required: true }, user: { type: Object, default: () => ({ name: 'Johon', age: 30 }) } })

In the above example, the id prop is of type Number and mandatory, and the user prop is of type Object and has a default value.

The default value allows you to define predefined values for props in Vue 3. If no props are sent to the component, Vue uses the default value. This is more convenient because it makes the component easier to use and safer.

In the next article, we will talk about emission in Vue3.

You can follow us on the networks and if the article is useful, share it with your friends in comments and Vuechi. ?