vue -on如何綁定多個事件

參數：

{string | Array<string>} event (數組只在 2.2.0+ 中支持)
{Function} callback

用法：

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

vue-on的api，就是說v-on只能傳入單個健值對，若是要一次性綁定多個事件，那隻能使用@onError=function @onChange=function這樣的操做，但是這麼作看起來不直接，當咱們想把事件的方法統一塊兒來，或者經過組件傳遞事件方法就有些棘手了

在講代碼以前咱們先了解一下vnode和directive，vnode是vue的虛擬dom，具體的實現和原理有興趣的同窗能夠的瞭解一下，這裏咱們要講一下vode上暴露的方法，vnode.componentInstance: Component | void; // component instance，what?這個是什麼東西，這個東西是當前節點對應的組件的實例，也就是說等同於vm。這裏要知道vue的api方法不只能夠在template中使用，也能夠在class中使用的，也是時說你能夠@onChange=function，也可vm.on('on-change',function),重要的是你要開心，這裏注意在實例上的方法要使用橫線命名的方法，等同於template的駝峯寫法。好啦，如今咱們說了這麼多，沒有vnode有什麼用啊，....，好吧，那先開始講如何獲取vnode，前面說到directive，讓咱們看一下它的回調函數暴露的參數

指令鉤子函數會被傳入如下參數：
el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性：
name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

是的，你看到了vnode，剩下的不用我說了吧

上代碼

Vue.directive('events', function (el,binding,vnode) {
    let {events} = binding.value || {};
    for(let i in events) {
        if (events.hasOwnOroperty(i)) {
            let v = events[i];
            let k = i.replace(/[A-Z]/g, match=>`-${match.toLowerCase()}`);
            vnode.vnode.componentInstance.$off(k, v);
            vnode.vnode.componentInstance.$on(k, v);
        }
    }
  }
)

由於update的緣故，因此必須講原來綁定的函數解綁再綁定一次，以避免形成重複觸發回調

漫漫前端路，共勉