vue2.0 #$emit,$on的使用

vue1.0中 vm.dispatch和vm. broadcast 被棄用，改用emit, on

vm.$on( event, callback )

監聽當前實例上的自定義事件。事件可以由vm.$emit觸發。回調函數會接收所有傳入事件觸發函數的額外參數。

vm.$emit( event, […args] )

觸發當前實例上的事件。附加參數都會傳給監聽器回調。

例子：

//父組件
<template>
    <ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
    data () {
      return {
        selectType: 0,
    },
    methods: {
      onSelectType (type) {
        this.selectType = type
      }
    }
</script>

父組件使用@select-type=”onSelectType”監聽由子組件vm.$emit觸發的事件，通過onSelectType()接受從子組件傳遞過來的數據，通知父組件數據改變了。

// 子組件
<template>
  <div>
    <span @click="select(0, $event)"  :class="{'active': selectType===0}"></span>
    <span @click="select(1, $event)"  :class="{'active': selectType===1}"></span>
    <span @click="select(2, $event)"  :class="{'active': selectType===2}"></span>
  </div>
</template>
<script>
    data () {
      return {
        selectType: 0,
    },
    methods: {
        select (type, event) {
            this.selectType = type
            this.$emit('select-type', type)
      }
    }
</script>

子組件通過$emit來觸發事件，將參數傳遞出去。