Vue.js - 从指令发出事件

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>

原文由 euvl 发布，翻译遵循 CC BY-SA 4.0 许可协议

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)

原文由 euvl 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您的解决方案对我不起作用。实际上 vnode.data.on 总是未定义

触发事件的方法是

 vnode.child.$emit('myevent');

希望这可以帮助。

原文由 Florian 发布，翻译遵循 CC BY-SA 3.0 许可协议