vue -on如何绑定多个事件

2024年5月10日 173次阅读 来源: 我不会典韦

参数：

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

漫漫前端路，共勉

    原文作者：我不会典韦
    原文地址: https://segmentfault.com/a/1190000017971282
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞