vue中 關於$emit的用法

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

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

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

例如：子組件：

1. <template>
2. <div class="train-city">
3. <span @click=‘select(`大連`)‘>大連</span>
4. </div>
5. </template>
6. <script>
7. export default {
8. name:‘trainCity‘,
9. methods:{
10. select(val) {
11. let data = {
12. cityname: val
13. };
14. this.$emit(‘showCityName‘,data);//select事件觸發後，自動觸發showCityName事件
15. }
16. }
17. }
18. </script>

父組件：

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

結果為：toCity: 大連

vue的$emit