1、父組件可以使用 props 把數據傳給子組件。

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

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

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

例如：子組件：

 1 <template>  
 2   <div class="train-city">  
 3     <h3>父組件傳給子組件的toCity:{{sendData}}</h3>   
 4     <br/><button @click=‘select(`大連`)‘>點擊此處將‘大連’發射給父組件</button>  
 5
 
   </div>  
 6 </template>  
 7 <script>  
 8   export default {  
 9     name:‘trainCity‘,  
10     props:[‘sendData‘], // 用來接收父組件傳給子組件的數據  
11     methods:{  
12       select(val) {  
13         let data = {  
14           cityname: val  
15         };  
16         this.$emit(‘showCityName‘,data);//
 
select事件觸發後，自動觸發showCityName事件  
17       }  
18     }  
19   }  
20 </script>  

　　父組件：

 1 <template>  
 2     <div>父組件的toCity{{toCity}}</div>  
 3     <train-city @showCityName="updateCity" :sendData="toCity"></train-city>  
 4 <template>  
 5 <script>  
 6
 
   import TrainCity from "./train-city";  
 7   export default {  
 8     name:‘index‘,  
 9     components: {TrainCity},  
10     data () {  
11       return {  
12         toCity:"北京"  
13       }  
14     },  
15     methods:{  
16       updateCity(data){//觸發子組件城市選擇-選擇城市的事件  
17         this.toCity = data.cityname;//改變了父組件的值  
18         console.log(‘toCity:‘+this.toCity)  
19       }  
20     }  
21   }  
22 </script>  

圖一：點擊之前的數據

圖二：點擊之後的數據

//END

vue學習筆記之$emit