Quelles sont les utilisations de $emit dans vue ?

Cette fois, je vais vous montrer comment utiliser $emit dans vue, et quelles sont les précautions lors de l'utilisation de $emit dans vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Les composants parents peuvent utiliser des accessoires pour transmettre des données aux composants enfants.

2. Les composants enfants peuvent utiliser $emit pour déclencher l'événement personnalisé du composant parent.

vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn；

Par exemple : Composant enfant :

<template>  
 <p class="train-city">  
  <span @click=&#39;select(`大连`)&#39;>大连</span>  
 </p>  
</template>  
<script>  
export default {  
 name:'trainCity',  
 methods:{  
  select(val) {  
   let data = {  
    cityname: val  
   };  
   this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件  
  }  
 }  
}  
</script>

Composant parent :

<template>  
  <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。  
<template>  
<script>  
export default {  
 name:'index',  
 data () {  
  return {  
   toCity:"北京"  
  }  
 }  
 methods:{  
  updateCity(data){//触发子组件城市选择-选择城市的事件   
   this.toCity = data.cityname;//改变了父组件的值  
   console.log('toCity:'+this.toCity)     
  }  
 }  
}  
</script>

Le résultat est :

toCity : Dalian

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

jQuery implémente l'effet de suspension des clics de souris

JS implémente une interface d'impression de polices de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!