How to pass data from Parent to Child in Vue 3 using Options API and Composition API

 How to pass data from parent to child component in Vue 3 (Options API and Composition API)

In Vue 3, we use Props or defineProps to pass data from a parent component to a child component. Props are the cusotm attributes. By using props, we can send the data from the parent to a child component. If you need to pass data from a child component to a parent component, you need to use emit.

The following example project includes two components; one is called ParentComponent and the other is called ChildComponent. In this tutorial, I will show you how to send name and title variables to the child component.

Prerequisites:

The reader needs to have basic knowledge about Vue JS and Components

In this tutorial, I'll show you how to use props in Vue 3 utilising the 

• Options API 
• Composition API Setup()
• Composition API <Script Setup>

How to pass data from parent to child component in the Vue 3 using Options API

ParentComponent:

1. I added a name and greeting property to the parent component's data property.
2. Before providing the props to a specific component, we must first import that component.
3. I'm imported a child component utilising the import statement.
4. In the components object, specify the component name.
5. I defined the name and greeting properties in data().
6. We can send props to specific component tags in that template tag.
7. I'm sending name and greeting props using the childcomponent tag.

ChildComponent: 

1. You must define receiving property names in the props array in the child component. I defined greetingtochild and nametochild in the props property, and we can now use them in the template section.
2. If you wish to use those props values within the script part, use this keyword, for example: this.propsName

How to pass data from  parent to child component in Vue 3 using the Composition API setup()

ParentComponent:

1. If the props are dynamic ones, we must define them in the setup method of the parent component before importing the child component.
2. I'm using the ref() function to make our values reactive in this case.
3. In the template part of the vue file, we must return the values we need to use.
4. We are able to pass props in that template tag.
5. I'm sending the salutation and name using the child component tag.

ChildComponent: 

1. You must specify the names of the receiving property variables inside the props array. I did so by defining the properties greetingtochild and nametochild inside the props array, and we can now utilize them in the template tag.
2. You must send the props parameters to the setup method and use the value, for example, props.propertyName; if you wish to use those props values inside the script Part. 

Note: If strongly typed properties are required, properties can be defined in the object with their data type.

How to pass data from  parent to child component in Vue 3 using the Composition API <script setup>

ParentComponent:

1. I imported a child component using the import statement.
2. Since I'm utilizing the ref() function to make our values reactive, you don't need to explicitly describe the component names that are imported into this component while script setup.
3. The values that were declared during script setup do not need to be returned.
4. We are able to pass props in that template tag.
5. I'm sending  greeting and name props using the child component tag.

ChildComponent: 

1. In child, you need to declare props values inside the defineProps macro 
2. You can define those props with value types and without value types as well.
3. Now we can use them in the template part.
4. If you want to use those props values inside the script part, example: props.propsName