How to Use Props to Create Better Vue Components

One of the key features of Vue is its modular architecture, which enables you to build web apps by combining small, reusable components. This allows you to update and maintain your web app easily.

Each component in Vue can have its own set of data and methods, which you can pass down to its child components with props. Here, you will learn how to use props in Vue to pass down data from parent to child components.

What Are Props in Vue?

Props—short for "properties"—are custom attributes in Vue that a parent component can pass down to its child components.

In Vue, parent components pass props to child components in a unidirectional flow. This means that child components can only read and utilize these passed props but cannot modify the data.

Using props allows you to create reusable components that you can apply throughout your application. Props save you time and effort, as you can reuse components rather than create new components from scratch.

How to Pass Props in Vue

Passing props in Vue is simple and different from the way you pass props in React. To pass a prop from a parent component to its child component in Vue, use the props option in the child component's script.

Here's an example:

        <!-- The child component -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <p>{{ emailAddress }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: ["title", "message", "emailAddress"],
};
</script>

The above code block describes a Vue child component utilizing props to pass data from a parent component. The component includes three HTML elements that display the title, message, and emailAddress properties with interpolation.

The props option in the child component takes in an array of properties. This array defines the properties the child component accepts from the parent component.

Here's an example of a Vue parent component passing data to the child component with props:

        <!-- parent component -->
<template>
  <div>
    <child-component
      title="Hello World"
      message="This is a message from the parent component"
      emailAddress="user0000@example.com"
    />
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
};
</script>

The parent component in the above code block passes three props to the child component. The code block passes static values to the title, message, and emailAddress props.

You can also pass dynamic values to your props with the v-bind directive. v-bind is a directive used in Vue to bind data to HTML attributes.

Here's an example of the Vue parent component utilizing the v-bind directive to pass dynamic values to the props:

        <!-- parent component -->
<template>
  <div>
    <child-component
      :title= "title"
      :message= "message"
      :emailAddress= "emailAddress"
    />
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: "Welcome dear",
      message: "How are you",
      emailAddress: "user0000@gmail.com",
    };
  },
};
</script>

Using the v-bind directive to pass data to the child component, you can update the props' values based on the parent component's state. For example, by changing the title data property in the parent component, the title prop passed to the child component will also be updated.

This method of defining props as an array of strings is a shorthand pattern. Each of the strings in the array represents a prop. This method is ideal when all props in the array have the same JavaScript data type.

Defining Props as an Object in Vue

Defining props as a JavaScript object instead of an array allows for better customization of each prop. Defining props as an object in a component will enable you to specify each prop's expected data type and default value.

Additionally, you can mark specific props as required, triggering a warning if the prop is not provided when the component is in use. Defining props as an object offers several advantages over defining props as an array, including:

Defining the expected data type and the default value for each prop makes it easier for you and your developer team to understand how exactly to use the component.
By marking props as required, you can catch errors early in the development process and provide more information to the developer team.

Here's an example of how to define props as an object in a Vue.js component:

        <template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <p>{{ emailAddress }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    title: {
      type: String,
      default: "Default Title",
    },
    message: {
      type: String,
      default: "Default Message",
    },
    emailAddress: {
      type: String,
      required: true,
    },
  },
};
</script>

This code block is an example of a Vue.js component that uses props to pass data from a parent component to a child component. The code block defines these props as objects with a type and default value or a required flag.

The code block defines the title and message props as strings with a default value and the emailAddress prop as a required string.

Choose the Best Method That Suits Your Vue App

You have learned how to define props both as an array and object. Your preference should suit the specific needs of your app.

Vue proves itself as a very flexible JavaScript framework. It offers a lot of methods and options to achieve the same goal with different advantages for any of the options or methods you choose to work with.