web-dev-qa-db-ja.com

Vue.jsカスタムイベントの命名

私には2つのコンポーネントがあり、1つには別のコンポーネントが含まれています。

そして、子供からイベントをトリガーすると、親でそれを受け取ることができません。

子コンポーネント

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

親コンポーネント

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

しかし、両方の場所でイベント名をmy-custom-eventに変更すると、機能します。

Vueはどういうわけかイベント名を変換しますか？または何が問題になる可能性がありますか？コンポーネントの命名規則について docs を読みましたが、イベントの命名に関連するものは何もありません

vue.jsvuejs2vue-component
8
xAoc

カスタムイベントの命名には常にkebab-caseを使用することをお勧めします。@ KoriJohnRoysが推奨するように、すべて一緒にスマッシュされた小文字のイベント動作しますが、読みにくくなります。イベントの命名にcamelCaseを使用することはお勧めしません。

Vue.JSの公式ドキュメント は、イベント名のトピックの下で次のように述べています。

イベント名

コンポーネントや小道具とは異なり、イベント名はケースの自動変換を提供しません。代わりに、発行されたイベントの名前は、そのイベントをリッスンするために使用される名前と正確に一致する必要があります。たとえば、camelCasedイベント名を発行する場合：

this.$emit('myEvent')

ケバブケースのバージョンを聞いても効果はありません。

<my-component v-on:my-event="doSomething"></my-component>

コンポーネントや小道具とは異なり、JavaScriptではイベント名が変数名やプロパティ名として使用されることはないため、camelCaseやPascalCaseを使用する理由はありません。さらに、DOMテンプレート内のv-onイベントリスナーは自動的に小文字に変換されるため（HTMLの大文字と小文字が区別されないため）、v-on：myEventはv-on：myeventになり、myEventをリッスンできなくなります。

これらの理由から、イベント名には常にkebab-caseを使用することをお勧めします。

15
ssc-hrep3

@ ssc-hrep3のkebab-caseに関するポイントに加えて

。sync のドキュメントでは、パターンupdate:myPropNameの使用を推奨しています

4
Nicholas Albion

カスタムイベントの場合、最も安全なオプションは、小文字のイベント名をすべてまとめて使用することです。現在、ケバブケースでさえ問題が発生する可能性があります。

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

次に、親コンポーネントで、キャメルケースの関数に自由にバインドします

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

少しぎこちないですが、機能します。

ソース （kebab-caseも機能しないと述べています）

2
Kori John Roys