Was sind die Verwendungsmöglichkeiten von $emit in Vue?

Dieses Mal zeige ich Ihnen, wie Sie $emit in Vue verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von $emit in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Übergeordnete Komponenten können Requisiten verwenden, um Daten an untergeordnete Komponenten zu übergeben.

2. Untergeordnete Komponenten können $emit verwenden, um das benutzerdefinierte Ereignis der übergeordneten Komponente auszulösen.

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

Zum Beispiel: Untergeordnete Komponente:

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

Übergeordnete Komponente:

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

Das Ergebnis ist:

toCity: Dalian

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

jQuery implementiert den Mausklick-Aussetzungseffekt

JS implementiert eine Schnittstelle zum Drucken von Textschriften

Das obige ist der detaillierte Inhalt vonWas sind die Verwendungsmöglichkeiten von $emit in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!