Vue.js 2.0中$on與$emit如何使用之例項講解

先對兩個方法來一波解釋

vm.$on(event,callback)

引數：

{string | Array} event (陣列只在 2.2.0+ 中支援)
{Function} callback

用法：

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

示例：

vm.$on('test', function (msg) {   
console.log(msg) 
}) 
vm.$emit('test', 'hi') 
// => "hi"

vm.$emit(event,[args])

引數：

{string} event
[…args]

觸發當前例項上的事件。附加引數都會傳給監聽器回撥。

上面是官方的api，很簡潔，粗略一看很容易誤解，這裡主要是$on的用法，這裡回過頭去看一下$on的用法，$on是監聽當前例項上的自定義事件，這個自定義事件可以由$emit來觸發，$on回撥函式接收的msg便是$emit方法第二個引數傳過來的值。當然你也可以在回撥函式裡不使用msg引數而執行其他操作。

下面是例項：

再定義一個元件（一個計數的元件）

Vue.component('simple-com',{
    template:'<button v-on:click="incresone">{{count}}</button>',
    data:function(){
        return {
            count:0
        }
    },
    methods:{
        incresone:function(){
            this.count+=1
            //監聽自定義的事件
            this.$on('increment',function(msg){
                //獲取$emit方法傳遞的第二個引數
                console.log(msg);
                alert("1");
            })
            //觸發自定義的事件
            this.$emit('increment',this.count)
        }
    }
   })

再使用元件

    <simple-com v-on:increment="incretol"></simple-com>
    <simple-com v-on:increment="incretol"></simple-com>
    <simple-com v-on:increment="incretol"></simple-com>
    <p>{{total}}</p>

例項化vue的程式碼

var vm = new Vue({
    el:"#app",
    data: {
        total:0
    }
    methods:{
        incretol:function(){
                this.total+=1
            }
    }
})

當我點選計數的時候，$on監聽increment事件，當increment事件執行時，便會彈出1，然後再繼續執行後面的程式碼。

當然$emit方法傳遞的第二個引數也能獲取到