Vue 组合事件处理程序答案

【问题标题】：Vue combine event handlersVue 组合事件处理程序
【发布时间】：2017-07-09 02:52:01
【问题描述】：

我有以下带有 contenteditable 的 Vue 事件处理程序：

<div contentEditable="true"
v-on:keyup="changed($event, current, 0)"
v-on:paste="changed($event, current, 0)"
v-on:blur="changed($event, current, 0)"
v-on:delete="changed($event, current, 0)"
v-on:focused="changed($event, current, 0)"></div>

但是，我在很多地方都调用了相同的代码，而且代码变得冗长而冗长。有没有办法组合事件处理程序？比如：

v-on:keyup:paste:blur:delete:focused?

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

您可以为此创建自定义指令。此示例可能会对您有所帮助：

Vue.directive('wrap-on', {
  bind: function(el, binding, vnode) {
    // Keep function to remove the event later.
    el.wrappedEventFunctions = el.wrappedEventFunctions || {};
    el.wrappedEventFunctions[binding.rawName] = binding.value;

    for (var key in binding.modifiers) {
      // Check if element is a vue component
      if (vnode.componentInstance) {
        vnode.componentInstance.$on(key, binding.value);
      } else {
        el.addEventListener(key, binding.value);
      }
    }
  },
  unbind: function(el, binding, vnode) {
    for (var key in binding.modifiers) {
      if (vnode.componentInstance) {
        vnode.componentInstance.$off(key, el.wrappedEventFunctions[binding.rawName]);
      } else {
        el.removeEventListener(key, el.wrappedEventFunctions[binding.rawName]);
      }
    }
  }
})

该指令将向元素添加事件处理程序。它检查元素是否是 vue 组件；如果它是一个 vue 组件，它会通过$on 注册事件。如果它不是 vue 组件，它使用addEventListener。您可以根据需要更改此行为。

而用法是这样的：

<input v-wrap-on.click.keydown="mixedCallback" />

或者：

<some-custom-component v-wrap-on.click.keydown="mixedCallback">
    ...
</some-custom-component>

【讨论】：

使用此解决方案 $event 不可用

【解决方案2】：

我认为目前没有办法像您描述的那样组合事件侦听器。

你可以做的是让这个 div 成为它自己的包装组件（例如，名为“editable-wrapper”）并发出一个change 事件：

<div
  contentEditable="true"
  v-on:keyup="$emit('change', {$event, current} )"
  v-on:paste="$emit('change', {$event, current} )"
  v-on:blur="$emit('change', {$event, current} )"
  v-on:delete="$emit('change', {$event, current} )"
  v-on:focused="$emit('change', {$event, current} )">
</div>

然后您只需要监听组件上的一个更改事件（data 是具有$event 和current 属性的对象）：

<editable-wrapper @change="changed(data)"></editable-wrapper>

【讨论】：

【解决方案3】：

这可能是您实际上需要其他东西的情况。我认为您可以使用watch 功能，它还可以处理“粘贴”和“剪切”事件（使用鼠标）和键盘键。

您只需要像这样为您的财产设置观察者

data: {
    coupon_code: '',        
},
watch: {
    coupon_code: function(){
        console.log('watch-'+this.coupon_code);
    },
},

和 HTML

<input type="text" autocomplete='off' v-model="coupon_code" >

documenation

【讨论】：

【解决方案4】：

我们可以像 object 一样声明事件和事件处理程序并使用 v-on。在您的情况下，您在 mixin 中声明此对象并在所有模板中使用相同的对象。

let eventMixin = { 
    data() {
       return {
          events : {
             'keyup' : 'changed($event, current, 0)',
             'focus' : 'changed($event, current, 0)',
       }
   }
}

let component = {
   mixins: [eventMixin],
   template: '<div contentEditable="true" v-on=events ></div>
}

希望这有帮助。 Vue v-on 文档你可以找到here，其中解释了如何将多个事件作为对象传递

【讨论】：