How to create a VUE 2 Component?

Passing Data to Vue.js Components: A Beginner’s Guide

Vue.js components are the building blocks of any Vue application. They encapsulate reusable pieces of your UI, making your code more organized and maintainable. But how do you get data into these components? That’s where props come in!

In this article, we’ll explore how to pass data from a parent component (like a page) to a child component in Vue.js 2, using a simple example.

1. Create the Child Component

Let’s start by creating a simple component called MyComponent.vue:

Code snippet

<template>
  <div>
    <p>The value of myProp is: {{ myProp }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    myProp: {
      type: String, // Or Number, Boolean, Array, etc.
      required: true // Or false if the prop is optional
    }
  }
}
</script>

Explanation:

props: This option defines the properties that the component can receive from its parent. Here, we define a prop called myProp of type String. We also set required: true, meaning the parent component must pass a value for this prop.

2. Use the Component in Your Page

Now, let’s use this component in a page (e.g., MyPage.vue):

Code snippet

<template>
  <div>
    <MyComponent :my-prop="pageVariable" /> 
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      pageVariable: 'Hello from MyPage!'
    };
  }
}
</script>

Explanation:

Import: We import the MyComponent using import.
Register: We register the component in the components option.
Pass the Prop: We use v-bind (or its shorthand :) to dynamically bind the pageVariable from the page’s data to the myProp prop of MyComponent.

How it Works

When Vue renders MyPage, it sees the <MyComponent> tag and passes the value of pageVariable to the myProp prop. Inside MyComponent, we can then access this value as this.myProp and display it in the template.

Important Notes:

One-Way Data Flow: Props are designed for one-way data flow from parent to child. If you need to modify the parent’s data from the child, you’ll need to use events ($emit).
Prop Validation: You can add validation rules (like type, required, default, and custom validators) to your props to ensure data integrity.

Conclusion

Props provide a clean and efficient way to pass data to your Vue.js components. By understanding how props work, you can build more modular and reusable components, leading to better organized and more maintainable Vue.js applications.