Detailed explanation of the use of $emit in Vue.js

<template>
  <div class="train-city">
    <h3>ToCity passed from parent component to child component:{{sendData}}</h3> 
    <br/><button @click='select(`Dalian`)'>Click here to emit 'Dalian' to the parent component</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // Used to receive data passed from the parent component to the child component methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//After the select event is triggered, the showCityName event is automatically triggered}
    }
  }
</script>

<template>
    <div>
        <div>Parent component's toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"Beijing"
      }
    },
    methods:{
      updateCity(data){//Trigger the child component city selection-select city event this.toCity = data.cityname;//Change the value of the parent component console.log('toCity:'+this.toCity)
      }
    }
  }
</script>