Detaillierte Erklärung zur Verwendung von $emit in Vue.js

<Vorlage>
  <div Klasse="Zug-Stadt">
    <h3>ToCity wurde von der übergeordneten Komponente an die untergeordnete Komponente übergeben:{{sendData}}</h3> 
    <br/><button @click='select(`Dalian`)'>Klicken Sie hier, um „Dalian“ an die übergeordnete Komponente auszugeben</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name:'ZugStadt',
    props:['sendData'], // Wird verwendet, um Daten zu empfangen, die von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden methods:{
      wähle(Wert) {
        lass Daten = {
          Stadtname: val
        };
        this.$emit('showCityName',data);//Nachdem das Select-Ereignis ausgelöst wurde, wird das ShowCityName-Ereignis automatisch ausgelöst}
    }
  }
</Skript>

<Vorlage>
    <div>
        <div>toCity{{toCity}} der übergeordneten Komponente</div>
        <Zugstadt @showCityName="updateCity" :sendData="anStadt"></Zugstadt>
    </div>
<Vorlage>
<Skript>
  importiere TrainCity aus "./train-city";
  Standard exportieren {
    Name: „Index“,
    Komponenten: {TrainCity},
    Daten () {
      zurückkehren {
        toCity:"Peking"
      }
    },
    Methoden:{
      updateCity(data){//Löst das Ereignis „Städteauswahl-Auswahl der untergeordneten Komponente“ aus this.toCity = data.cityname;//Ändert den Wert der übergeordneten Komponente console.log('toCity:'+this.toCity)
      }
    }
  }
</Skript>