vue中 關於$emit的用法

一、父組件能夠使用 props 把數據傳給子組件。
二、子組件能夠使用 $emit 觸發父組件的自定義事件。

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

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

例如：子組件：

<template>

  <div class="train-city">

    <h3>父組件傳給子組件的toCity:{{sendData}}</h3> 

    <br/><button @click='select(`大連`)'>點擊此處將‘大連’發射給父組件</button>

  </div>

</template>

<script>

  export default {

    name:'trainCity',

    props:['sendData'], // 用來接收父組件傳給子組件的數據

    methods:{

      select(val) {

        let data = {

          cityname: val

        };

        this.$emit('showCityName',data);//select事件觸發後，自動觸發showCityName事件

      }

    }

  }

</script>

 

 

父組件：

<template>

    <div>

        <div>父組件的toCity{{toCity}}</div>

        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>

    </div>

<template>

<script>

  import TrainCity from "./train-city";

  export default {

    name:'index',

    components: {TrainCity},

    data () {

      return {

        toCity:"北京"

      }

    },

    methods:{

      updateCity(data){//觸發子組件城市選擇-選擇城市的事件

        this.toCity = data.cityname;//改變了父組件的值

        console.log('toCity:'+this.toCity)

      }

    }

  }

</script>

圖二：點擊以後的數據