Wie kann ich Ereignis-Listener in Vue benutzerdefinierte Direktive hinzufügen?

Question

Ich verwende Vue2.x und ich möchte mit Hilfe Anpassen directives.however in vue1.x ein Ereignis-Listener hinzufügen ich den fließenden Codeausschnitt verwenden:

Vue.directive('demo',{ 
    bind() { 
    let self = this 
    this.event = function (event) { 
     self.vm.$emit(self.expression, event) 
    } 
    this.el.addEventListener('click', this.stopProp) 
    document.body.addEventListener('click', this.event) 
    } 
}) 

aber in vue2.x, fand ich Das 'this' ist immer undefined. Und ich kann nicht herausfinden, wie man das vm (Vue Instance) -Objekt bekommt. Ich habe alle übergebene Parameterliste unter documentation ausprobiert.

Kann jemand Zugriff auf das VM-Objekt erhalten?

Answer 1

Es gibt ein paar Unterschiede, und Sie können ein voll funktionierendes Beispiel für Ihre Schnipsel sehen (wenn auch ein wenig gezwickt) bei this CodePen, aber ich werde hier erarbeiten:

Ihre Verweise auf this ungültig sind, weil in Der Kontext der Richtlinie this bezieht sich auf die window. Anstelle dieser Referenzen:

this.event = ... 
// ... 
self.vm.$emit() 
// ... 
self.expression 

sollten Sie die drei Argumente an bind() weitergegeben werden raubend:

1. el - das DOM-Element
2. binding - Bindungsobjekt für die Metadaten der Richtlinie, einschließlich expression
3. vnode - VNode-Objekt - seine context-Eigenschaft ist die Vue-Instanz

Mit denen in der Hand jene oben genannten drei Linien dann mit entspräche:

el.event = ... 
// ... 
vnode.context.$emit() 
// .. 
binding.expression 

Schließlich Randnotiz: Ihre Veranstaltung Zuhörer verursachen würde nichts passieren, weil Ihr auf das Element löst eine stopProp Funktion (Das wird von Ihrem Snippet ausgeschlossen), das vermutlich stopPropagation() aufruft, aber dann versuchen Sie, das propagierte Ereignis auf dem body abzufangen.