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

成都創新互聯公司-專業網站定制、快速模板網站建設、高性價比千陽網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式千陽網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋千陽地區。費用合理售后完善，十余年實體公司更值得信賴。

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>

結果為：

toCity: 大連

上述內容就是$emit怎么在vue中使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

當前文章：$emit怎么在vue中使用
網站URL：http://www.yijiale78.com/article28/pchscp.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、App設計、虛擬主機、網站改版、服務器托管、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯