How to Use Props in Vue.js

How to Use Props in Vue.js

How to Use Props in Vue.js

In this post we will give you information about How to Use Props in Vue.js. Hear we will give you detail about How to Use Props in Vue.js And how to use it also give you demo for it if it is necessary.

Vue.js is quite amazing with its application and component structure. It also offers some amazing capabilities.

In this article, we are going to look at how we can use and implement props in Vue.js.

What are Props in Vue.js?

In simple terms, props are the acronym of properties. Props are very essential when we want to pass data from the parent components to other child components. Props always take the top to bottom approach.

That is props can only take the flow from parent to child components and not vice versa. Props can also be of various types such as strings, arrays, objects, numbers, Boolean, and even Functions.

Data in props can only flow one way – from the top, or parent component, to the bottom, or child components. This simply means you cannot pass data from a child to a parent.

Another thing to keep in mind is that Props are read-only and cannot be modified by the child component because the parent component “owns” that value.

Why should you use props?

Why should you use props, you ask? If you have a data object (say, of the Billboard top 10 artists list) you want to display in two different components but in very different ways, the first instinct will be to create these two separate components, add the array inside the data object and then display them in the template.

 

Define a prop inside the component

Props are the way components can accept data from components that include them (parent components).

When a component expects one or more props, it must define them in its props property:

Vue.component('user-card', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>Hi {{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

Accept multiple props

You can have multiple props by appending them to the array:

Vue.component('user-card', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: ['firstName', 'lastName']
}
</script>

 

Vue.js Prop Types

To specify the type of prop you want to use in Vue, you will use an object instead of an array. You’ll use the name of the property as the key of each property, and the type as the value.

If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning. The valid types you can use are:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol
Vue.component('user-card', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

You can allow multiple different value types:

props: {
  firstName: [String, Number]
}

Set a prop to be mandatory

You can require a prop to be mandatory:

props: {
  firstName: {
    type: String,
    required: true
  },
  lastName: {
    type: String,
    required: true
  }
}

Set the default value of a prop

You can specify a default value:

props: {
  firstName: {
    type: String,
    required: true,
    default: 'Alex'
  },
  lastName: {
    type: String,
    required: true,
    default: 'Mark'
  }
}

For objects:

props: {
  user: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default can also be a function that returns an appropriate value, rather than being the actual value.

Passing props to the component

You pass a prop to a component using the syntax

<ComponentName color="white" />

if what you pass is a static value.

If it’s a data property, you use

<template>
  <ComponentName :name="name" />
</template>

<script>
export default {
  data: function() {
    return {
      name: 'Alex'
    }
  },
}
</script>

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

<template>
  <ComponentName :name="name == '' ? 'Alex' : name" />
</template>

<script>
export default {
  data: function() {
    return {
      name: ''
    }
  },
}
</script>

Conclusion

In this article, we have learned what props do and how props work in Vue.js.

In summary, we use props to pass down data from the parent components to the child component(s). The child component also emit events to the parent component(s) in case you need to send data/events from the child to the parent component.

Thank you for reading How to Use Props in Vue.js blog. Hope this code and post will helped you for implement How to Use Props in Vue.js. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US