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:

ठीक है, मैं पाया है कि अगर मैं निर्देश में (नवीनतम Vue संस्करणों में या fns()) vnode.data.on.bar.fn(); फोन यह 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); 
    } 
} 

और इसे यह वा कॉल करें 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>