欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于vue中 $emit的用法詳解

 更新時間：2018年04月12日 09:35:07   作者：Oliver556  
這篇文章主要介紹了vue中 $emit的用法，通過實例代碼給大家介紹了子組件和父組件的相關(guān)知識，需要的朋友參考下吧

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

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

vm.$emit( event, arg ) //觸發(fā)當前實例上的事件
vm.$on( event, fn );//監(jiān)聽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事件觸發(fā)后，自動觸發(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: 大連

總結(jié)

以上所述是小編給大家介紹的關(guān)于vue中 $emit的用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論