Vue.js での $emit の使用に関する詳細な説明

<テンプレート>
  <div class="train-city">
    <h3>ToCity が親コンポーネントから子コンポーネントに渡されました:{{sendData}}</h3> 
    <br/><button @click='select(`Dalian`)'>ここをクリックすると、親コンポーネントに 'Dalian' が送信されます</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前:'trainCity',
    props:['sendData'], // 親コンポーネントから子コンポーネントに渡されるデータを受信するために使用されます。メソッド:{
      選択(val) {
        データ = {
          都市名: val
        };
        this.$emit('showCityName',data);//select イベントがトリガーされた後、showCityName イベントが自動的にトリガーされます}
    }
  }
</スクリプト>

<テンプレート>
    <div>
        <div>親コンポーネントの toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<テンプレート>
<スクリプト>
  「./train-city」からTrainCityをインポートします。
  エクスポートデフォルト{
    名前:'インデックス',
    コンポーネント: {TrainCity},
    データ （） {
      戻る {
        都市:"北京"
      }
    },
    方法:{
      updateCity(data){//子コンポーネントの都市選択をトリガー - 都市イベントを選択 this.toCity = data.cityname;//親コンポーネントの値を変更する console.log('toCity:'+this.toCity)
      }
    }
  }
</スクリプト>