Comment utiliser $emit dans vue

Cette fois, je vais vous montrer comment utiliser $emit dans Vue, et quelles sont les précautions à prendre pour utiliser $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 sous-composants peuvent utiliser $emit pour déclencher des événements personnalisés des composants parents.

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 :

Utiliser la complétion automatique du fichier d.ts

Comment créer Vue2 dans des projets pratiques .0 sélection radio mutuellement exclusive

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!