We use Emit function for passing data from child component to Parent component and we are gonna show you to how it goes in codes
We start Emit function from child component
<template>
<div>
<div class="Child component">
<h1>d Component</h1>
<h2>{{ count }}</h2>
<button @click="sendDate">send count</button>
</div>
</div>
</template>
<script setup>
import {defineEmits, ref} from "vue";
const count=ref(0);
const emit=defineEmits();
const users=[
{
id:1,
name:"khusi",
age:20,
profession:"IT"
},
{
id:1,
name:"khusi",
age:20,
profession:"IT"
},
{
id:1,
name:"khusi",
age:20,
profession:"IT"
},
{
id:1,
name:"khusi",
age:20,
profession:"IT"
},
]
const sendDate=()=>{
emit("counter", 11);
emit("users", users);
}
</script>
Now we can pass them into Parent component
<template>
<div>
<div class="Parent component">
<h1>c Component</h1>
<ComponentD @counter="submitEmit" @users="submitUser"/>
</div>
</div>
</template>
<script setup>
import {defineEmits} from "vue";
import ComponentD from "./d-component.vue";
const emit=defineEmits();
const submitEmit=(e)=>{
console.log(e);
emit("counter", e)
}
const submitUser=(e)=>{
console.log(e);
emit("users", e);
}
</script>
the result is
SOCIAL SHARE CARD GENERATOR