Properties

data1: It is the variable name that is given to data1 of type define.

Example 1: In this example, we will pass name, course, age, and batch as props data and print it. Vue.js project files are:

HTML

<!-- App.vue -->
<template> 
    <h1>w3wiki</h1> 
    <Home name="Sam" 
          Course="Btech"
          Age=22
          Batch="7th" /> 
</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: String, 
            Course: String, 
            Age: Number, 
            Batch: Number, 
        } 
    } 
</script>

Output:

props

Example 2: In this example, we will define props with script setup. We will pass props data to the component and show it on the mouse click event.

HTML

<!-- App.vue -->
<template> 
    <h1>w3wiki</h1> 
    <Student name="Sam" /> 
</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">Geeks name is: {{ props.name }}</h2> 
</template> 
  
<script setup> 
    import { defineProps } from "vue"; 
    const props = defineProps(['name']) 
</script> 
  
<script> 
    export default { 
        name: 'StudentL', 
        data() { 
            return { data: false } 
        } 
    } 
</script>

Output:

pros

Reference: https://vuejs.org/guide/components/props.html

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 Content

Props Declaration
Prop Passing Details
One-Way Data Flow
Prop Validation
Boolean Casting

Properties

HTML

HTML

HTML

HTML

Vue.js Props

Similar Reads