How to catch props data on component change in Vue.js ?

In this article, we will see how we can pass different data values between components with the help of props in Vue.js along with a basic understanding of props, components, and their syntax with an example.

Vue.js is an open-source progressive JavaScript framework for developing user interfaces and single-page applications. It was created in 2014 by Evan You. Vue.js is designed to be easy to learn and use and has become one of the most popular JavaScript frameworks available in the market. It helps to develop complex code into smaller components that are reusable and easily manageable.

Props is a special keyword in Vue.js that represents the properties of a component and these props are defined on a component and are passed from one component to another. The props are passed only one way hence most of the time this transfer of data is from parent to child and these props are read-only i.e. they can’t be modified.

Components are the small reusable block of code that needs props to perform at their fullest with the help of props. We can pass data from one component to another component and we don’t have to write the same code again and again for different data in simple words it makes our application more flexible and modular.

Passing props data: In Vue.js, the props are passed from the parent component to the child component and this is achieved by the parent component defining the v-bind directive, which binds the data to props. Now the child component can receive the props and perform any operation or render it.

Syntax:

<template>
    <ComponentName :key='key' />
</template>

<script>
    export default {
        data() {
            return {
                key: 'value'
            }
        },
    }
</script>

or we can pass a static value along with the component name using the below syntax:

<ComponentName key="value" />

Note: The above syntax is of the parent component from which data is passed to the child component. Now, it’s the child component’s responsibility to catch these props and perform any operation other than modifying the props.

In Vue.js, props are defined inside the child component using the props property that takes an array as input each of the elements in the array represents the props the child component will receive.  

Catching a single props data: In order to catch a single prop from the parent component we define props inside our child component using the following syntax.

Syntax:

<template>
    <p>Hello, {{ username }}</p>
</template>

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

Example 1: This example illustrates how a prop named ‘username’ is caught by a child component which is being passed from the parent component and rendered.

• App.vue

HTML

<!-- Parent Component -->
<template>
    <div>
        <ChildComponent :username='username' />
    </div>
</template>

<script lang="ts">
    import ChildComponent from './ChildComponent.vue';

    export default {
        components: {
            ChildComponent
        },
        data() {
            return {
                username: 'GeeksforGeeks',
            }
        }
    }
</script>

• childcomponent.vue

HTML

<!-- Child Component -->
<template>
    <div>
        <h1>Hello, {{ username }}</h1>
    </div>
</template>

<script lang="ts">
    export default {
        props: [
            'username'
        ]
    }
</script>

Output: From the output, we have passed a single prop username from the parent component to the child component, and the data assigned to the username prop is rendered as you can see in the output image.

Catching Multiple props data: In order to catch multiple props from the parent component, we define props inside our child component using the following syntax.

Syntax:

<template>
    <h1> {title} </h1>
    <h3> {content} </h3>
</template>

<script>
    export default {
        props: [
            'title',
            'content'
        ],
    }
</script>

Example 2: This example illustrates how props named ‘title’ and ‘content’ is caught by a child component that is being passed from the parent component and rendered.

• App.vue

HTML

<!-- Parent Component -->
<template>
    <div>
        <ChildComponent :title='title'
                        :content='content' />
    </div>
</template>

<script lang="ts">
    import ChildComponent from './ChildComponent.vue';

    export default {
        components: {
            ChildComponent
        },
        data() {
            return {
                title: 'GeeksforGeeks',
                content:
'This is an article on how to catch props on component change'
            }
        }
    }
</script>

• childcomponent.vue

HTML

<!-- Child Component -->
<template>
    <div>
        <h1> {{title}} </h1>
        <h3> {{content}} </h3>
    </div>
</template>

<script lang="ts">
    export default {
        props: [
            'title',
            'content'
        ],
    }
</script>

Output: From the output, we have passed two props’ titles and content from the parent component to the child component, and data assigned to these props is rendered as you can see in the output image. 

In conclusion, props and components are key concepts in Vue JS they help us in making applications flexible, reusable and modular. props help us in sharing our data dynamically and are read-only which makes them consistent and reliable.