Vue.js Props Declaration Last Updated : 24 Jul, 2024 Comments Improve Suggest changes Like Article Like Report Vue.js Props Declaration facilitates the declaration of props explicitly for the Vue components. With this, Vue can identify how external props are passed to the component that should be treated as fall-through attributes. In other words, Props of Vue components is a configuration for the transfer of data between the components. Props are not defined by default we have to define them to use data that is passed to components.Different ways to define PropsUsing defineProps() : We can declare the props using defineprops() function:<script setup > const student = defineProps([ 'name'] ) console.log(student.name )</scirpt>Using props option: We can define props using the props option:export default { props: ['name']}We can also use objects in place of an array to declare props // In script setup defineProps({ name: String });// In non scrpt setup export default { props: { name: String }}We can use TypeScript pure type annotations to declare props:<script setup lang="ts"> defineProps<{ name ?: string }>()</script>SyntaxdefineProps({ prop1: 'datatype', props2: 'datatype' })props: { prop1: 'datatype', props2: 'datatype' }; Propertiesprop1: It is an identifier that is used to reference the first data received by the component as prop.prop2: It is an identifier that is used to reference second data received by the component as prop.datatype: It is the respective datatype for props.Example 1: In this example, we will declare the props as props option and print its value. HTML <!-- App.vue --> <template> <h1>GeeksforGeeks</h1> <Home name="Sam" Age=23 Batch='7h' Course="Btech" /> </template> <script> import Home from './components/Home.vue'; export default { name: 'App', components: { Home, } } </script> <style> #app { text-align: center; margin-top: 60px; } h1 { color: rgb(40, 212, 103) } </style> HTML <!-- Home.vue --> <template> <h2> Props element are:<br /> </h2> <h3>Name : {{ name }}</h3> <h3>Course: {{ Course }}</h3> <h3>Age: {{ Age }}</h3> <h3>Batch: {{ Batch }}</h3> </template> <script> export default { name: 'HomeDo', props: ['name', 'Course', 'Age', 'Batch'] } </script> Output:Example 2: In this example, we will declare the props using defineProps() method and print its value in DOM. HTML <!-- App.vue --> <template> <h1>GeeksforGeeks</h1> <Student name="Sam" Age="23" Course="Btech" Batch="3rd" /> </template> <script> import Student from './components/Student.vue'; export default { name: 'App', components: { Student, } } </script> <style> #app { text-align: center; margin-top: 60px; } h1 { color: rgb(40, 212, 103) } </style> HTML <!-- Student.vue --> <template> <h2>Chick on botton to view the props</h2> <button v-on:click.left="data = !data"> Show </button> <h2 v-if="data"> Name : {{ name }} <br /> Course : {{ Course }} <br /> Age : {{ Age }}<br /> Batch : {{ Batch }}</h2> </template> <script setup> import { defineProps } from "vue"; defineProps({ name: String, Course: String, Age: String, Batch: String }) </script> <script> export default { name: 'StudentL', data() { return { data: 0 }; } } </script> Output: Reference: https://vuejs.org/guide/components/props.html#props-declaration Comment More infoAdvertise with us Next Article Vue.js Props Declaration K kumarbalit8 Follow Improve Article Tags : JavaScript Vue.JS Geeks Premier League 2023 Similar Reads Props vs Data in Vue.js Props in Vue.jsProps in Vue.js are custom attributes that allow data to be passed from a parent component to a child component. This enables the parent component to communicate with its child components, providing them with data or functionality. In Vue.js, props are used to pass data from parent co 3 min read Vue.js Props Vue.js Props is an attribute to the configuration of the component. It is used to pass the data to the component to work dynamically. The props configuration defines the type of data it can receive from different components of Vue.Table of ContentProps DeclarationProp Passing DetailsOne-Way Data Flo 4 min read Vue.js v-pre Directive The v-pre directive is a Vue.js directive used to skip compilation for this element and all its children. You can use this for displaying raw mustache tags. First, we will create a div element with id as app and let's apply the v-pre directive to an element. Further, we can use a heading element to 1 min read Vue.js Prop Passing Details Vue.js Props are used to pass data to the component. For passing details to props we have to first declare props. To declare the prop name we choose a name that is more descriptive of the value that it holds. In this article, we will see the Prop passing the details in Vue.js. The following are the 4 min read v-for Directive in Vue.js v-for directive is a Vue.js directive used to loop over a data usually an array or object. First, we will create a div element with id as app and let's apply the v-for directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing th 1 min read Explain Plugins in Vue.js VueJS is one of the best frameworks for JavaScript like ReactJS. The VueJS is used to design the user interface layer, it is easy to pick up for any developers. It is compatible with other libraries and extensions as well. If you want to create a single-page application, I think VueJS is the first c 3 min read Vue.js Prop One-Way Data Flow In VueJS, all the props are bonded between the child and properties is one-way-down. When we update the prop in the parent component, it is updated to all the child components, but the reverse does not happen and VueJS warns the use. This is used as protection from altering the state of a parent-by- 3 min read Vue.js v-once Directive The v-once directive is a Vue.js directive that is used to avoid unwanted re-renders of an element. It treats the element as a static content after rendering it once for the first time. This improves performance as it does not have to be rendered again. First, we will create a div element with the i 1 min read Vue.js Computed Properties Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supportin 2 min read Vue.js Directive Vue.js is a progressive JavaScript framework used for building interactive user interfaces. One of its core features is directives, which allow you to extend HTML with special syntax. Directives in Vue.js provide a simple and expressive way to bind data, manage events, control rendering, and more — 6 min read Like