vueでコンポーネントを使用するときの名前付き大文字と小文字の問題

5085 ワード

文書ディレクトリ

一、いくつかの命名概念

二、コンポーネント名

三、Propの大文字と小文字

4、カスタムイベントのイベント名

五、資料

一、いくつかの命名概念kebab-case:my-component-nameなどの短い横線で区切られた名前PascalCase:MyComponentNameなどの頭文字の大文字の名前camelCase:myComponentNameなどのアルパカの命名法
二、コンポーネント名
コンポーネントを登録するときは、常に名前を付ける必要があります.たとえば、グローバル登録の場合、コンポーネント名はVue.componentの最初のパラメータです.

Vue.component('my-component-name', {
      /* ... */ })

コンポーネント名を定義する方法は2つあります.
1、kebab-case短横線で区切って命名する

Vue.component('my-component-name', {
      /* ... */ })

kebab-case(短い横線で区切られた名前)を使用してコンポーネントを定義する場合も、などのカスタム要素を参照するときにkebab-caseを使用する必要があります.
2、PascalCase頭文字で大文字で命名する

Vue.component('MyComponentName', {
      /* ... */ })

PascalCase(頭文字の大文字で命名)を使用してコンポーネントを定義する場合、このカスタム要素を参照するときに2つの命名法を使用できます.すなわち、およびはいずれも許容可能である.それでも、DOM(すなわち、文字列以外のテンプレート)で直接使用する場合、kebab-caseのみが有効であることに注意してください.
三、Propの大文字と小文字
HTMLのattribute名は大文字と小文字が敏感ではないため、ブラウザはすべての大文字を小文字として解釈します.これは、DOMのテンプレートを使用する場合、camelCase(アルパカ命名法)のprop名には、その等価なkebab-case(短横線分割命名)を使用して命名する必要があることを意味する.

Vue.component('blog-post', {
     
  //   JavaScript    camelCase  
  props: ['postTitle'],
  template: '{
     { postTitle }}
'
})


<blog-post post-title="hello">blog-post>

文字列テンプレートを使用すると、この制限は存在しません.
四、カスタムイベントのイベント名
コンポーネントとpropとは異なり、イベント名には自動化された大文字と小文字の変換はありません.トリガされたイベント名は、このイベントをリスニングするために使用される名前と完全に一致する必要があります.
たとえば、camelCase名のイベントがトリガーされた場合:this.$emit('myEvent')この名前のkebab-caseバージョンを傍受しても効果はありません.


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

コンポーネントやpropとは異なり、イベント名はJavaScript変数名やproperty名として使用されないため、camelCaseやPascalCaseを使用する理由はありません.また、v-onイベントリスナーはDOMテンプレートで自動的にフル小文字に変換される(HTMLは大文字と小文字が敏感ではないため)ため、v-on:myEventはv-on:myeventになり、myEventが傍受されることが不可能になる.
vueの公式推奨では、kebab-case(短い横線で区切られた名前)のイベント名を常に使用します.
五、資料
コンポーネント登録-Vue.js
Prop — Vue.js
カスタムイベント-Vue.js

いくつかのVueについての文章.(6)

【浅談】vueのコンポーネント化

vueでコンポーネントを使用するときの名前付き大文字と小文字の問題

{ { postTitle }}