$emit怎么在vue中使用

本篇文章為大家展示了$emit怎么在vue中使用，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。

2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

vm.$emit( event, arg ) //觸發(fā)當(dāng)前實(shí)例上的事件
vm.$on( event, fn );//監(jiān)聽event事件后運(yùn)行 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事件觸發(fā)后，自動(dòng)觸發(fā)showCityName事件  
  }  
 }  
}  
</script>

父組件:

<template>  
  <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //監(jiān)聽子組件的showCityName事件。  
<template>  
<script>  
export default {  
 name:'index',  
 data () {  
  return {  
   toCity:"北京"  
  }  
 }  
 methods:{  
  updateCity(data){//觸發(fā)子組件城市選擇-選擇城市的事件   
   this.toCity = data.cityname;//改變了父組件的值  
   console.log('toCity:'+this.toCity)     
  }  
 }  
}  
</script>

結(jié)果為：

toCity: 大連

上述內(nèi)容就是$emit怎么在vue中使用，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。