Vue.js - 来自指令的Emit事件

Question

是否有可能发出一个自定义事件,从该指令在到该指令所连接的组件.

我希望它能像示例中所描述的那样工作,但事实并非如此.

例:

//Basic Directive
<script>
  Vue.directive('foo', {
    bind(el, binding, vnode) {
      setTimeout(() => {
        //vnode.context.$emit('bar'); <- this will trigger in parent
        vnode.$emit('bar');
      }, 3000);
    }
  });
</script>


//Basic Component
<template>
  <button v-foo @bar="change">{{label}}</button>
</template>
<script>
  export default{
    data() {
      return {
        label: 'i dont work'
      }
    },
    methods: {
      change() {
        this.label = 'I DO WORK!';
      }
    }
  }
</script>

关于此事的任何想法？我错过了什么吗？

JSFiddle:https://jsfiddle.net/0aum3osq/4/

更新1:

好吧,我发现如果我在指令中调用vnode.data.on.bar.fn();(或fns()在最新的Vue版本中)它将触发bar事件处理程序.

更新2:

临时解决方案:

  /*temp. solution*/
  var emit = (vnode, name, data) => {
    var handlers = vnode.data.on;

    if (handlers && handlers.hasOwnProperty(name)) {
      var handler = handlers[name];
      var fn = handler.fns || handler.fn;

      if (typeof fn === 'function') {
        fn(data);
      }
    }
  } 

//Basic Directive
<script>
  Vue.directive('foo', {
    bind(el, binding, vnode) {
      setTimeout(() => {
        emit(vnode, 'bar');
      }, 3000);
    }
  });
</script>

Answer 1

所以我在Vue 2+中使用的解决方案(考虑到目前为止没有答案):

在指令中添加方法:

var emit = (vnode, name, data) => {
  var handlers = (vnode.data && vnode.data.on) ||
    (vnode.componentOptions && vnode.componentOptions.listeners);

  if (handlers && handlers[name]) {
    handlers[name].fns(data);
  }
}

并这样称呼它:

bind(el, binding, vnode) {
  emit(vnode, 'bar' , {some: 'event', data: 'here'});
}

方法的好处:

1在项目中保持相同的代码样式,这意味着每个处理程序都可以声明为
v-on:handler_name有意义的(以开发人员的方式)处理.其他解决方案,例如将回调作为参数发送,有时会让人感到困惑,而且如果不深入研究文档/代

2使用内置事件系统还可以优雅地处理事件对象.例如,此代码将完美地工作:

<button v-foo @bar="bar(1, $event, 2)">{{label}}</button>
...
methods: {
  bar(one, event, two) { console.log(one, event, two); }
} 

编辑:

在v2.1 +中你可以使用这个内部指令绑定:

vnode.context.$emit(eventname)