So verwenden Sie $emit in Vue

Dieses Mal zeige ich Ihnen, wie Sie $emit in Vue verwenden und welche Vorsichtsmaßnahmen für die 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. Unterkomponenten können $emit verwenden, um benutzerdefinierte Ereignisse von übergeordneten Komponenten 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:

Verwenden der automatischen Vervollständigung von d.ts-Dateien

Wie man Vue2 in praktischen Projekten erstellt .0 Radioauswahl schließt sich gegenseitig aus

Das obige ist der detaillierte Inhalt vonSo verwenden Sie $emit in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!