SoFunction
Updated on 2025-04-05

Detailed explanation of the usage of $emit in vue

1. The parent component can use props to pass data to the child component.

2. The child component can use $emit to trigger the parent component's custom event.

vm.$emit( event, arg ) // Trigger event on the current instancevm.$on( event, fn );//monitoreventRun after event fn；

For example: Subcomponents:

<template>  
 <div class="train-city">  
  <span @click='select(`Dalian`)'>Dalian</span>  
 </div>  
</template>  
<script>  
export default {  
 name:'trainCity',  
 methods:{  
  select(val) {  
   let data = {  
    cityname: val  
   };  
   this.$emit('showCityName',data);//After the select event is triggered, the showCityName event will be automatically triggered  }  
 }  
}  
</script>

Parent component:

<template>  
  <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> // Listen to the showCityName event of the child component.<template>  
<script>  
export default {  
 name:'index',  
 data () {  
  return {  
   toCity:"Beijing"  
  }  
 }  
 methods:{  
  updateCity(data){//Trigger subcomponent city selection - event that selects city    = ;//Changed the value of the parent component   ('toCity:'+)     
  }  
 }  
}  
</script>

The result is:

toCity: Dalian

Summarize

The above is a detailed explanation of the usage of $emit in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!