Vue JS Emit function

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>



<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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173201082567193.jpg?x-oss-process=image/resize,p_40" class="lazy" 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>

<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></componentd> 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>


          </div>

            
        </div></template>