How to use props in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To use props in VueJS. we are going to declare props using the props option. Props are passed from parent to child components as attributes.

Short solution

Let’s take a short solution, How we can use props in VueJS? We have two components first one is the parent component parentComp.vue and the second one is the child component childComp.vue. We are going to pass props from the parent component and asccess props in the child component:

parentComp.vue

<template>
    <ChildComp siteTitle="sortoutcode"/>
</template>
<script>
import ChildComp from "./components/ChildComp.vue";
export default {
  name: "parentComp",
  components: {
    ChildComp,
  },
};
</script>

In this child component we are going to access the props:

childComp.vue

<template>
    <p>{{siteTitle}}</p>
</template>
<script>
export default {
  name: "childComp",
  props:{
    siteTitle: String,
  }
};
</script>

Today, I am going to show you How you use props in VueJS?

Table of Content

• Setup the Vue (Optional)
• Create FirstComponent.vue and import it into App.js
• What are props?
• How to use props?

This article will guide you to How do I use props in vueJS.

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation.

How to Install the VueJS project?

Create FirstComponent.vue and import it into App.js

Create the new component in the src/components/ components folder. The component name is FirstComponent.vue and imported into the App.js file:

App.js

<template>
  <div id="app">
    <FirstComponent />
  </div>
</template>

<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
  name: "App",
  components: {
    FirstComponent,
  },
};
</script>

What are props?

Props is a way using this way we can pass data props parent component to child component in VueJS.Using the props you can create a component one time and you use the multiple time to pass the different props. That means you can make your component reusable.

How to use props?

Let’s take an example for better understanding. We are going to make two components that is parent component first component.vueand the child componentSecondComponent.vue`.

To pass the props from parent component to child. We are going to add the custom attribute on the child component:

FirstComponent.vue

<template>
  <div>
    <h1>Welcome to sortoutcode.com</h1>
    <h3>This is Parent Component.</h3>
    <SecondComp website="sortoutcode" URL="https://sortoutcode.com/" />
  </div>
</template>

<script>
import SecondComponent from "./SecondComponent";
export default {
  name: "FirstComponet",
  components: {
    SecondComp: SecondComponent,
  },
};
</script>

To access the props in the child component we have to define the props property in Vue component. The proper datatype can be String, Array, Object, Number, etc.

SecondComponent.vue

<template>
  <div>
    <H3>This Child Component.</H3>
    <div style="background-color: 'black'">
      <p color="white">{{ website }}</p>
      <p color="white">{{ URL }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SecondComponent",
  props: {
    website: String,
    URL: String,
  },
};
</script>

For now, let’s check the output.

Output

All the best 👍.