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 :

좋아, 내가 지시어에 (최신 뷰 버전 또는 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

그래서 뷰 ​​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'}); 
} 

장점 :

한 모든 핸들러가
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); } 
} 

---

편집 : 2.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>