vue --子父組件傳值

一、父組件能夠使用 props 把數據傳給子組件。
二、子組件能夠使用 $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: 大連