How To Use Props In Vue.js

  • 18-05-2022
  • 1168
  • Vue
  • Haresh Chauhan

In Vue property declared using the props.

In addition you can declared props as array of string. also, we can use the object of the string you will see in the given example.

Using props you can validate the string too using object of string like with different ways like props should always have Array, String, Objectetc...

Also one thing props can define with long name using with camelCase this will avoids to havinf use of single quotes and double-quotes.

props will allow you to use directry in templete without sing this. Because they are valid javascript identifier.

You can pass props as two ways

(1) Static propes:

<custom-button custom-class="btn btn-success" btn-text="Save"/>

(2) Daynamic propes:

<select-box :country-data="countries" />

This both types of props exmaple given below.

Prop Validation

Different vlidation for Props.

export default {
    props: {

        // Basic type check
        //  (`null` and `undefined` values will allow any type)
        propA: Number,

        // Multiple possible types
        propB: [String, Number],

        // Required string
        propC: {
        type: String,
        required: true
        },

        // Number with a default value
        propD: {
        type: Number,
        default: 100
        },

        // Object with a default value
        propE: {
        type: Object,

        // Object or array defaults must be returned from
        // a factory function. The function receives the raw
        // props received by the component as the argument.
        default(rawProps) {
            return { message: 'hello' }
        }
        },

        // Custom validator function
        propF: {
        validator(value) {
            // The value must match one of these strings
            return ['success', 'warning', 'danger'].includes(value)
        }
        },

        // Function with a default value
        propG: {
        type: Function,
        // Unlike object or array default, this is not a factory function - this is a function to serve as a default value
        default() {
            return 'Default function'
        }
        }
    }
}

Also you can pass as :

  • Array
  • Object
  • Number
  • String
  • Boolean
  • Date
  • Function
  • Symbol

Example: Props Declaration

Inside form component, I have import two child components (1) Select component (2) Button component, First thing in this component is i import this two component as child, then i have define this two components in side components, after that i used this two component in template.

After importing this two components in Form component i had define the data() method in this method i am returing countries static array.

(1) Select.vue component: I am passing the Property name country-data="countries" and that property i have binding bacause of fetching from data object, Here i thing you should keep in mide that is the property you passing that will you have to bind if you passing as variable.

(2) Button.vue component: I am passing the Property name custom-button="btn btn-success" and other property passing which is btn-text="Save" So that both property i am passing with static text which i am not send from data object, so in this case i not need to bind that property. just written down the string which you want the passout.

Form.vue

<template>
    <div class="container mt-5 py-2 px-2 border">

        <!-- EXMAPLE 1 -->
        <select-box :country-data="countries" />
        <br>

        <!-- EXMAPLE 2 -->
        <custom-button custom-class="btn btn-success" btn-text="Save"/>

    </div>
</template>
    
<script>

import selectBox from './Select'
import customButton from './Button'

export default {
    
    name:'Form',

    components:{
        selectBox,
        customButton,
    },

    data(){
        return {
            countries:[ 
                'India',
                'Indonesia',
                'Iran',
                'Ireland',
                'Israel',
                'Italy',
                'Jamaica',
                'Japan',
                'Jordan',
                'Kazakhstan',
                'Kenya',
                'Kuwait',
                'Kyrgyzstan',
                'Laos',
                'Latvia',
                'Lebanon',
                'Lesotho',
                'Libyan Arab Jamahiriya',
                'Liechtenstein'
            ],
        }
    }
}

</script>
    
<style scoped>

</style>

Form component, i passed a property :country-data="country" which i am taking in Select component inside the props method and validating the countryData should array, It will through array if you will not pass propery as array.

After omport the props looping that data into select option tag. So here i have passed an array from Form component.

Select.vue

<template>
    <div class="form-group">
        <label for="country">Select Country :</label>
        <p></p>
        <select id="country" class="form-control">
        <option value="" selected disabled>Select your country name</option>
            <option v-for="(country,index) in countryData" :key="index">{{ country }}</option>
        </select>
    </div>
</template>
  
<script>

export default {

    name: 'Select',

    props:{
        countryData:Array
    },
}
</script>
  
<style scoped>

</style>

Button component two propspassing from From component, One is customClass and second is btnText both are validating string that means that both propery always should have string else that will throw the errors.

That button class will alwasy daynamic from from components and button text also coming from From component.

Button.vue

<template>
    <div class="form-group">
        <button :class="customClass">{{ btnText }}</button>
    </div>
</template>

<script>

export default {

    name:'Button',

    props:{
        customClass: String,
        btnText: String,
    }
}
</script>

<style scoped>

</style>

Remember on thing props you can directly use in the template they do not need to use with this because it's javascript relevant instead of it you want to use that props inside the script you need to use with this. else will throw an errors.


We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :