vue中 關於$emit的用法

1、父組件可以使用 props 把數據傳給子組件。
2、子組件可以使用 $emit 觸發父組件的自定義事件。

 

vm.$emit( event, arg ) //觸發當前實例上的事件

vm.$on( event, fn );//監聽event事件后運行

fn；

例如：子組件：

<template>  
  <div class="train-city">  
    <span @click='select(`大連`)'>大連</span>  
  </div>  
</template>  
<script>  
export default {  
  name:'trainCity',  
  methods:{  
    select(val) {  
      let data = {  
        cityname: val  
      };  
      this.$emit('showCityName',data);//select事件觸發后，自動觸發showCityName事件  
    }  
  }  
}  
</script>  

父組件：

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