title: Vue.js - Emit event from directive
body: <p>Is it possible to emit a custom event <em>from</em> the directive <em>in</em> the component to which this directive is attached.</p>
  
  <p>I was expecting it to work as described in example, but it does not.</p>
  
  <p>Example: </p>
  
  <pre><code>//Basic Directive
  &lt;script&gt;
    Vue.directive('foo', {
      bind(el, binding, vnode) {
        setTimeout(() =&gt; {
          //vnode.context.$emit('bar'); &lt;- this will trigger in parent
          vnode.$emit('bar');
        }, 3000);
      }
    });
  &lt;/script&gt;
  
  
  //Basic Component
  &lt;template&gt;
    &lt;button v-foo @bar="change"&gt;{{label}}&lt;/button&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default{
      data() {
        return {
          label: 'i dont work'
        }
      },
      methods: {
        change() {
          this.label = 'I DO WORK!';
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any ideas on the matter? Am I missing something?</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/0aum3osq/4/" rel="noreferrer">https://jsfiddle.net/0aum3osq/4/</a></p>
  
  <p><strong>Update 1:</strong> </p>
  
  <p>Okay, i've found that if I call <code>vnode.data.on.bar.fn();</code> (or <code>fns()</code> in latest Vue versions) in directive it will trigger <code>bar</code> event handler. </p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>Temporary solution:</p>
  
  <pre><code>  /*temp. solution*/
    var emit = (vnode, name, data) =&gt; {
      var handlers = vnode.data.on;
  
      if (handlers &amp;&amp; handlers.hasOwnProperty(name)) {
        var handler = handlers[name];
        var fn = handler.fns || handler.fn;
  
        if (typeof fn === 'function') {
          fn(data);
        }
      }
    } 
  
  //Basic Directive
  &lt;script&gt;
    Vue.directive('foo', {
      bind(el, binding, vnode) {
        setTimeout(() =&gt; {
          emit(vnode, 'bar');
        }, 3000);
      }
    });
  &lt;/script&gt;
  </code></pre>