Vue.js benutzerdefinierte Ereignisbenennung

Question

Ich habe zwei Komponenten, eine enthält eine andere.

Und wenn ich Ereignis von Kind auslösen, kann ich es nicht in Eltern erhalten.

Kinderkomponente

this.$emit('myCustomEvent', this.data); 

Geordnete Komponente

<parent-component v-on:myCustomEvent="doSomething"></parent-component> 

Aber, wenn ich geändert Ereignisnamen zu my-custom-Ereignis in beiden Orten es funktioniert.

Vue irgendwie Ereignisnamen umwandeln? Oder was kann ein Problem sein? Ich las docs über Komponentennamenskonvention, aber es zu Fall nichts im Zusammenhang

Answer 1

Vue.js Namensgebung verwandelt nicht nur XML-Tags (Komponentennamen), sondern auch Attribute, so dass, wenn Sie Ereignis

$emit('iLikeThis')

generieren

Sie müssen damit umgehen wie:

v-on:i-like-this="doSomething"

Von docs:

Wenn Komponenten (oder Requisiten) Registrierung, können Sie Kebab-Fall Camelcase oder Titlecase verwenden. obwohl ...

Innerhalb von HTML-Templates, Sie haben verwenden, um den Kebab-Fall Äquivalente:

Answer 2

Für benutzerdefinierte Ereignisse, ist die sicherste Option, um nur ein niedrigeres Gefassten Ereignis zu verwenden Namen alle zusammen zerschlagen. Derzeit kann sogar Kebab-Fall Probleme haben.

this.$emit('mycustomevent', this.data); 

dann in der übergeordneten Komponente, erwartet Sie ein Kamel gefasste Funktion

<parent-component v-on:mycustomevent="doSomething"></parent-component> 

es ist ein bisschen janky zu binden, aber es funktioniert.

Source (besagt, dass Kebab-Fall funktioniert auch nicht)