vue -on如何绑定多个事件

44次阅读

共计 1467 个字符，预计需要花费 4 分钟才能阅读完成。

参数：
{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);
}
}
}
)