参数:

{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的缘故,所以必须讲原来绑定的函数解绑再绑定一次,以免造成重复触发回调

漫漫前端路,共勉

Logo

前往低代码交流专区

更多推荐