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> 

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); 
    } 
} 

並稱它爲wa Y：

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) 

Answer 2

您的解決方案沒有爲我工作。事實上vnode.data.on總是不確定的

什麼工作觸發事件是

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

希望這有助於。

Answer 3

@ euvl的解決方案很好，但我認爲只需將函數作爲參數傳遞給您的指令就更簡單，更簡單。似乎也簡化了你的指令的接口。

<script> 
    Vue.directive('foo', { 
    bind(el, binding) { 
     setTimeout(() => { 
     binding.value(); 
     }, 3000); 
    } 
    }); 
</script> 

<template> 
    <button v-foo="change">{{label}}</button> 
</template> 

<script> 
    export default{ 
    data() { 
     return { 
     label: 'i dont work' 
     } 
    }, 
    methods: { 
     change() { 
     this.label = 'I DO WORK!'; 
     } 
    } 
    } 
</script>