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的缘故，因此必须讲原来绑定的函数解绑再绑定一次，以避免形成重复触发回调

漫漫前端路，共勉