Vue JS Emit function

<template>
    <div>
        <div>



<p>Now we can pass them into Parent component<br>
</p>

<pre class="brush:php;toolbar:false"><template>
    <div>
        <div>



<p>the result is</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173201082567193.jpg" alt="Vue JS Emit function" /></p>

<p>Lets we learn how it works</p>

<p>- import {defineEmits, ref} from "vue"; Importing necessary things from vue<br>
- const count=ref(0); creating a veriable and giving it default value with ref <br>
<br>
- const emit=defineEmits(); It has to declared defineEmits in any veriable<br>
- const users=[<br>
    {id:1, name:"khusi", age:20, profession:"IT"},<br>
    {id:1, name:"khusi", age:20, profession:"IT"},<br>
    {id:1, name:"khusi", age:20, profession:"IT"},<br>
    {id:1, name:"khusi", age:20, profession:"IT"},<br>
]  Using from any Data<br>
- const sendDate=()=>{<br>
    emit("counter", 11);<br>
    emit("users", users);<br>
} we create a function and give it in first optional number and the second our data inside of defineEmits and in the string we write optional name for using in Parent component<br>
And we learn how to call them in Parent component

<p>-const submitEmit=(e)=>{<br>
    console.log(e);<br>
    emit("counter", e)   <br>
}<br>
-const submitUser=(e)=>{<br>
    console.log(e);<br>
    emit("users", e);<br>
} Two function created and in it we call our emit variable from child component and give them its name and e. In this case e=Our optional number that 11 and our data<br>
- <ComponentD @counter="submitEmit" @users="submitUser"/> Finally we call two function under emit optional names and we can see the results on console</p>

<p>Thank you All for attentions</p>