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

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

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

The following example project includes two components; one is called ParentComponent and the other is ChildComponent. The ChildComponent contains two text boxes where the first and last names are entered. whenever we click the button, the parent component receives the full name from the computed property. 

Prerequisites:

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

In this article, I'll go over three different ways to use props in Vue 3 utilising the 

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

How to pass(emit) data from child to parent in Vue 3 using Options API

ChildComponent:

1. I'm creating two boxes with those v-models named fname and lname.
2. and creating one button in that button's @click event, I try to emit the passData event and fullname value.
3. Inside the script part: declaring variables for fname and lname in data()
4. Calculating fullname inside the computed property means that whenever the fname lname value changes, it will calculate the fullname.
5. In the methods property, I'm creating a passingData function that emits the full name.

ParentComponent:

1. Using the import statement, I imported a child component.
2. Define the component name in the components object.
3. In methods, I'm creating a new DataFromChild() function that receives the data from the child.
4. It will show the received value in the alert.

How to pass(emit) data from child to parent in Vue 3 using Composition API Setup()

ChildComponent:

1. I'm creating two boxes with those v-models named fname and lname.
2. and creating one button in that button's @click event, I try to emit the passData event and fullname value.
3. Inside the setup() method, I declare lname and fname as ref.
4. It makes your values reactive.
5. calculating fullname inside the computed property. Whenever the fname lname value changes, it will calculate the fullname inside the setup function.
6. In setup(), we need to pass props and context props because context has an emit method.
7. I'm creating a passingData function that emits the full name.
8. and return the values and functions declared in setup().

ParentComponent:

1. Using the import statement, I imported a child component.
2. Define the component name in the components object.
3. In setup(), I create a new DataFromChild() function that receives the data from the child.
4. It will show the received value in the alert.
5. returning the DataFromChild from setup()

How to pass(emit) data from child to parent in Vue 3 using Composition API Script Setup

ChildComponent:

1. I'm creating two boxes for those v-models named fname and lname.
2. and creating one button in that button @click event, I try to emit the passData event and fullname value.
3. I am declaring lname and fname as ref(). ref() makes your values reactive.
4. Calculating the fullname as a computed property: whenever the fname or lname value changes, it will calculate the fullname.
5. In script setup, if you want to use a variable value, you need to use a variable name. value, ex: fname.value
6. I am creating a passingData function that emits the full name.
7. and return the values and functions declared in the setup()

ParentComponent:

1. Using the import statement, I imported a child component.
2. We don't need to define the component name in the components object while using the script setup.
3. I create a new DataFromChild() function that receives the data from the child.
4. It will show the received value in the alert.
5. Returning the DataFromChild() in return{} is also not needed here.